"Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit)" most likely because of race condition

[kowalski]

The application crashes at start with and UI displays error "HMRClient is not a registered callable module". In adb logcat I can see that the error comes from call RCTDeviceEventEmitter.emit.

Interestingly, having spent a lot of time troubleshoting this, I found out that issue can easily be worked around.

The error happens when I do at the module level:

import QRCodeScanner from 'react-native-qrcode-scanner'; 

But goes away when I import it later on in the render function:

const ScanPassword: React.FC<IScanPasswordProps> = ({ onRead }) => {
  const QRCodeScanner = require('react-native-qrcode-scanner').default;

The above works flawelessly.

This leads me to believe that QRCodeScanner or RNCamera performs some initialization at import time and it uses RCTDeviceEventEmitter.emit to post message to JS-side code. When I import it at module level the initialization happens too early and RCTDeviceEventEmitter has not been instantiated yet. So it's a race condition.

By importing at runtime I'm delaying the initialization and this ensures that RCTDeviceEventEmitter has been intialized by this time.

Build details?

This is happening on Android, I haven't checked on Ios yet. I'm using react-native 0.62.0, react-native-qrcode-scanner 1.4.1, react-native-camera 3.30.0, react-native-permissions: 2.1.5.

[renatobenks]

hmm, it seems really weird for sure. Do you have the react-native-camera been importing in other places (may before importing react-native-qrcode-scanner)?

[kowalski]

This is really weird, but I no longer have this problem.

I was not importing react-native-camera directly from my project, it was only imported as a dependency of react-native-qrcode-scanner.

[renatobenks]

hmm, got it @kowalski! thank you for sharing this, I'll pin this issue in the case of someone else face the same problem