[Bug]: Invariant Violation: new NativeEventEmitter() requires a non-null argument.

[Jack-Gill-TH]

Which Platforms?

iOS

Which React Native Version?

0.68.7

Which @braze/react-native-sdk SDK version?

5.2.0

Repro Rate

100%

Steps To Reproduce

Example:

1. import { BrazePlugin } from '@segment/analytics-react-native-plugin-braze';.
2. Run the app.

Expected Behavior

App should run correctly

Actual Incorrect Behavior

App freezes after loading bundle from Metro

Verbose Logs

 ERROR  Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes
 WARN  Module RNEventEmitter requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
 WARN  Module RNLocalization requires main queue setup since it overrides `constantsToExport` but doesn't implement `requiresMainQueueSetup`. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Note: RNLocalization and RNEventEmitter are modules created for this project.

Additional Information

I originally raised this issue on the github for the segment Braze plugin, and you can find that thread here: segmentio/analytics-react-native#888

However, I've confirmed that it is a line from braze-react-native-sdk that is causing the problem: https://github.com/braze-inc/braze-react-native-sdk/blob/4ef01ede9c36a6f557d25cf7c704271c54d99a40/src/braze.js#L37C46-L37C46

It seems to be that I am not setting up the bridge correctly/something is incompatible between my app and the Braze iOS code. If I add a new bit of code to the constructor of my main App file to import NativeModules.BrazeReactBridge and create a NativeEventEmitter with it, it does not throw an error. Also, I can log out the BrazeReactBridge and see that it is NOT null, so it seems like some kind of race condition? The BrazeReactBridge is null when the Braze class from your sdk is instantiated.

You can find my AppDelegate files here: https://drive.google.com/drive/folders/1hRVjZYsGNHjFJwZRbIOppcZQV-Htb-KZ?usp=sharing

Any support is greatly appreciated!

[hokstuff]

Hi @Jack-Gill-TH,

Thanks for filing this issue and linking between the thread here and the one on Segment's React Native Braze partner SDK. Since it appears to be a pretty technical issue (possibly related to a race condition), would you be able to try to reproduce this in a fresh project to ensure that it isn't interfering with other parts of the app? It's pretty difficult to debug the root cause if there are many unknowns in a larger production app.

Thank you!

[Jack-Gill-TH]

Hi @hokstuff thanks for getting back to me!

I have set up a fresh React Native project, using the same version of RN as our project is using, and followed the Braze iOS integration steps, and I cannot reproduce the problem. I am importing BrazePlugin at the top of the App.js file and immediately adding it as a plugin, but it seems to have no problem accessing NativeModules.BrazeReactBridge.

One extra odd thing is that I'm getting a linting error for the import line in my project (Unable to resolve path to module '@segment/analytics-react-native-plugin-braze'.) but no such error for any of my other modules, including the others that end up under 'node_modules/@segment'. Not sure if that's related at all!

I'm continuing to investigate, though I've been looking at this for a few weeks now and I'm running out of ideas 😅 Is there any kind of 'ready' state I should be waiting for before I try and import Braze?

[jerielng]

Thanks @Jack-Gill-TH, we'll take a deeper dive into the issue, but there shouldn't be any kind of waiting before you can use Braze in the React Native SDK. If you have followed those setup steps, your instance should be ready to go.

I'm not sure about the linting error, though. It may be possible you need to reinstall it. Have you verified that the plugin appears under the file hierarchy?

[Jack-Gill-TH]

Thanks @jerielng thats's useful to know.

I've definitely reinstalled it plenty of times, and I've confirmed that the plugin files definitely are in the file hierarchy where I would expect them to be. Was just wondering whether it could be connected - trying to give as much info as possible because I know it's a big ask to ask you to figure out what's wrong with a big project!

[jerielng]

Thanks for the confirmation, and we appreciate the information! We'll try our best to diagnose the issue, but If there's any reproduction steps you are able to come up with and share, please continue to let us know!

[Jack-Gill-TH]

@jerielng of course, I'll keep at it! My next idea is to take a close look at the settings in XCode for my project and the fresh one - maybe there's some kind of compile-order setting that's configured differently in my project? It's at least six years old so there's often bits of legacy config hiding where you'd least expect 😅

[Jack-Gill-TH]

Some more findings:

I get the same problem when I just integrate the Braze RN SDK. As soon as I add import Braze from '@braze/react-native-sdk'; to my App.js file I get the 'new NativeEventEmitter() requires a non-null argument.' error. But if I log NativeModules.BrazeReactBridge to the console I see what is definitely the correct object with all of the expected Braze functions on it.

I tried making a release build with the import line in and got the same result, or rather, the app immediately crashes as opposed to showing the RN logbox.

[jerielng]

Thanks, @Jack-Gill-TH, one thing that might help as well: Is this a new integration? Are you able to confirm what is the earliest version that's causing this?

[Jack-Gill-TH]

Hi @jerielng - this is a new integration, we've had segment and firebase set up for a while but this is the first time we've ever included the Braze sdk. I'll do some experimentation today to see if I can find an earlier version where this isn't a problem. I've tried going down to 4.1.0 of the Braze SDK and that had the same problem, but I'll check earlier versions.

[Jack-Gill-TH]

@jerielng I've tried with 3.0.0 as well and get the exact same error. Unfortunately when I tried 2.0.0 I couldn't get XCode to create a debug build and it seemed like it was just too old and was using some no longer available Interfaces/Functions.

[jerielng]

Hey @Jack-Gill-TH, just wanted to follow up if you are still facing this issue in the React Native SDK? From our testing, we haven't been able to reproduce this in a fresh project, unfortunately. We've referenced the sample AppDelegate you've provided as well. This issue continues to be on our radar.

Let us know if there is any additional information you have found that may be of use.

[Jack-Gill-TH]

Hi @jerielng ! Thanks for following up. In the end I decided that I needed to move on with my implementation and couldn't wait to figure out how this could be properly fixed. What I've ended up with is using "@braze/react-native-sdk": "5.2.0" and "patch-package": "^8.0.0" to apply the following patch:
@braze+react-native-sdk+5.2.0.patch

This is working for me currently, and I've successfully implemented Braze identification and push notifications using the segment plugin. So I'm happy if you want to reduce the priority of this or close it as won't fix. Our app is in need of some modernisation and I expect to be involved in an initiative to bring all our dependencies up to date and maybe switch over to expo, so I'll maybe return with some info about how that goes, but that won't be for a while yet!