iOS error - TypeError: null is not an object (evaluating '_reactNative.NativeModules.MuxModule.initialize')

[davidwinograd1]

I'm getting this error on iOS when implementing Mux Analytics for THEOplayer. Are there any errors/incorrect implementation in my code? @tvanlaerhoven

I am following the guide here: https://github.com/THEOplayer/react-native-theoplayer-analytics/blob/main/mux/README.md

"react-native-theoplayer": "^3.0.1"
"@theoplayer/react-native-analytics-mux": "^1.1.1",

Here is my code:

import {useMux} from '@theoplayer/react-native-analytics-mux';

const muxOptions = {
    debug: true,
    data: {
      env_key: MUX_ENV_KEY, // required

      // Site Metadata
      viewer_user_id: userId,

      // Player Metadata
      player_name: playerName,
      player_version: '3.0.1',
      player_init_time: Date.now(),

      // Video Metadata
      video_id: id,
      video_title: title,
      video_duration: player?.duration,
      video_stream_type: isLive ? 'live' : 'on-demand',
      video_producer: creatorId,
      page_type: 'watchpage',
    },
  };

  const [mux, initMux] = useMux(muxOptions);
  
  const onReady = (player) => {
    initMux(player);

    setPlayer(player);

   ...
  };
  
   <THEOplayerView config={playerConfig} onPlayerReady={onReady}>
   

Thanks!

[tvanlaerhoven]

@davidwinograd1 it looks like the native bridges are not compiled/included in your project. I guess this related to the missing repository in your other bug report? So does this issue still persist?

[davidwinograd1]

@tvanlaerhoven fixed for iOS, thanks!

[davidwinograd1]

ah wait, @tvanlaerhoven, my mistake. When testing, I had temporarily commented out the initMux(player); and that's why I thought the error went away. But even with the new version of the package, this issue still persists, exactly as before. please reopen and let me know what I could be doing wrong! thanks

[davidwinograd1]

@wvanhaevre Hello! thank you for taking on the issue. I would love to know if there are any updates or potential fixes at your nearest convenience!

[ceyhun-o]

Hi @davidwinograd1,

Our RN iOS developer is currently out of office due to vacation. We will give a deeper look and understand what is going on here sometime next week.

Kind regards,
Ceyhun

[wvanhaevre]

Hi, I can't reproduce the issue. I'm currently using v1.2.0 of the mux connector and for me it is working fine on my iPhone. Can you verify if running on an actual device changes things? I'm not sure if the underlying Mux SDK has support for simulator and I would like to rule that out.
Does you project only target iOs devices? I noticed the the Mux SDK is not supporting tvOS for the moment. I changed our podspec to only add the mux dependency for iOS.

[wvanhaevre]

I did a test on our example application on our example app from the react-native-theoplayer package: example
I added to App.tsx:

const MUX_OPTIONS = {
  debug: true,
  data: {
    env_key: 'ENV_KEY', // required
    // Site Metadata
    viewer_user_id: '12345',
    experiment_name: 'player_test_A',
    sub_property_id: 'cus-1',
    // Player Metadata
    player_name: 'My Main Player',
    player_version: '1.0.0',
    player_init_time: 1451606400000,
    // Video Metadata
    video_id: 'abcd123',
    video_title: 'My Great Video',
    video_series: 'Weekly Great Videos',
    video_duration: 12000, // in milliseconds
    video_stream_type: 'on-demand', // 'live' or 'on-demand'
    video_cdn: 'Akamai'
  }
};

and this is my onPlayerReady:

const onPlayerReady = (player: THEOplayer) => {
    setPlayer(player);

    initMux(player);

    // optional debug logs
    player.addEventListener(PlayerEventType.SOURCE_CHANGE, console.log);
    player.addEventListener(PlayerEventType.LOADED_DATA, console.log);
    player.addEventListener(PlayerEventType.LOADED_METADATA, console.log);
    player.addEventListener(PlayerEventType.READYSTATE_CHANGE, console.log);
    player.addEventListener(PlayerEventType.PLAY, console.log);
    player.addEventListener(PlayerEventType.PLAYING, console.log);
    player.addEventListener(PlayerEventType.PAUSE, () => {
      mux.current?.changeVideo({
        video_title: "test",
        video_duration: 2500
      })
    });
    player.addEventListener(PlayerEventType.SEEKING, console.log);
    player.addEventListener(PlayerEventType.SEEKED, console.log);
    player.addEventListener(PlayerEventType.ENDED, console.log);
    player.source = SOURCES[0].source;

    player.backgroundAudioConfiguration = { enabled: true };
    player.pipConfiguration = { startsAutomatically: true };
    console.log('THEOplayer is ready:', player.version);
  };

This results in (pausing video triggers mux command):

[davidwinograd1]

@wvanhaevre Yes my project exclusively targets iOS devices. and I can confirm that it crashes on the physical device as well, due to the "null is not an object" error. is there any other part of my code that I can show you that may be able to help narrow down the issue?

[wvanhaevre]

Would it be possible to prepare a minimal reproduction RN project? Just setting up the player with one of our test sources and adding the mux connector (i.e. similar to the code above). If you would share that with us, we can have a look and hopefully reproduce the issue.