search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.17k stars 24.32k forks source link

Invariant Violation: Module AppRegistry is not a registered callabel module (calling runApplication) #26687

Closed Hugo-Meiring closed 1 year ago

Hugo-Meiring commented 5 years ago
Screenshot 2019-10-02 at 13 35 27

Currently on React Native 0.61.0-rc.3, updating to 0.61.1 causes this issue.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 871.19 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

  1. Update the package.json values to use latest 0.61.1 (and other latest values pulled for a react-native init)
  2. Run the project (yarn && cd ios && pod install && cd .. && yarn start + yarn ios)

Describe what you expected to happen: The app should be running like on 0.61.0-rc.3. What major changes where made between the release candidate and 0.61.0 (also your website still show 0.60.0 as the latest version). Here is the source code changes between the two: https://react-native-community.github.io/upgrade-helper/?from=0.61.0-rc.3&to=0.61.1

Snack, code example, screenshot, or link to a repository:

Can't be provided, production and private react-native init application.

radko93 commented 5 years ago

Unfortunately, this error does not give any feedback on what exactly is wrong. You need to dig deeper.

Hugo-Meiring commented 5 years ago

Here are logs from Xcode:


2019-10-02 14:19:16.303 [error][tid:com.facebook.react.JavaScript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2019-10-02 14:19:16.305 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2019-10-02 14:19:16.311 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 2 and callID 1 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.313 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 18 and callID 9 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.314 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 40 and callID 20 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.317 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 2 and callID 1 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.318 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 73 and callID 36 for module <unknown>. Args: '[0]'
2019-10-02 14:19:16.319 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 99 and callID 49 for module <unknown>. Args: '[1]'
2019-10-02 14:19:16.320 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 18 and callID 9 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.322 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 123 and callID 61 for module <unknown>. Args: '[2]'
2019-10-02 14:19:16.323 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 139 and callID 69 for module <unknown>. Args: '[3]'
2019-10-02 14:19:16.323 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 155 and callID 77 for module <unknown>. Args: '[4]'
2019-10-02 14:19:16.324 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 40 and callID 20 for module <unknown>. Args: '[{"app_state":"active"}]'
2019-10-02 14:19:16.327 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 73 and callID 36 for module <unknown>. Args: '[0]'
2019-10-02 14:19:16.329 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 99 and callID 49 for module <unknown>. Args: '[1]'
2019-10-02 14:19:16.330278+0200 libertychat[59943:2042874] [] nw_proxy_resolver_create_parsed_array [C8 proxy pac] Evaluation error: NSURLErrorDomain: -1003
2019-10-02 14:19:16.330 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 171 and callID 85 for module <unknown>. Args: '[5]'
2019-10-02 14:19:16.331 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 187 and callID 93 for module <unknown>. Args: '[6]'
2019-10-02 14:19:16.367066+0200 libertychat[59943:2042874] [] nw_proxy_resolver_create_parsed_array [C10 proxy pac] Evaluation error: NSURLErrorDomain: -1003
2019-10-02 14:19:16.368 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 203 and callID 101 for module <unknown>. Args: '[7]'
2019-10-02 14:19:16.369 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 219 and callID 109 for module <unknown>. Args: '[8]'
2019-10-02 14:19:16.369 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 239 and callID 119 for module <unknown>. Args: '[9]'
2019-10-02 14:19:16.369809+0200 libertychat[59943:2042874] [] nw_proxy_resolver_create_parsed_array [C11 proxy pac] Evaluation error: NSURLErrorDomain: -1003
2019-10-02 14:19:16.376 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 123 and callID 61 for module <unknown>. Args: '[2]'
2019-10-02 14:19:16.381 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 139 and callID 69 for module <unknown>. Args: '[3]'
2019-10-02 14:19:16.385 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 155 and callID 77 for module <unknown>. Args: '[4]'
2019-10-02 14:19:16.390 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 171 and callID 85 for module <unknown>. Args: '[5]'
2019-10-02 14:19:16.393 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 187 and callID 93 for module <unknown>. Args: '[6]'
2019-10-02 14:19:16.393457+0200 libertychat[59943:2042874] [] nw_proxy_resolver_create_parsed_array [C12 proxy pac] Evaluation error: NSURLErrorDomain: -1003
2019-10-02 14:19:16.395 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 255 and callID 127 for module <unknown>. Args: '[10]'
2019-10-02 14:19:16.396 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 203 and callID 101 for module <unknown>. Args: '[7]'
2019-10-02 14:19:16.397 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 271 and callID 135 for module <unknown>. Args: '[11]'
2019-10-02 14:19:16.398 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 287 and callID 143 for module <unknown>. Args: '[12]'
2019-10-02 14:19:16.399 [error][tid:com.facebook.react.JavaScript] Invariant Violation: No callback found with cbID 303 and callID 151 for module <unknown>. Args: '[13]'
2019-10-02 14:19:16.399 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 219 and callID 109 for module <unknown>. Args: '[8]'
2019-10-02 14:19:16.403 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 239 and callID 119 for module <unknown>. Args: '[9]'
2019-10-02 14:19:16.446 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: No callback found with cbID 255 and callID 127 for module <unknown>. Args: '[10]'```
Hugo-Meiring commented 5 years ago

Here is are whats if your re-run the app:

Screenshot 2019-10-02 at 14 26 26
radko93 commented 5 years ago

Did you try to enable the Debug option?

Hugo-Meiring commented 5 years ago
Screenshot 2019-10-02 at 14 30 27
m4rcoperuano commented 5 years ago

Getting this same issue but only on Android. Very weird :(

Hugo-Meiring commented 5 years ago

Did you try to enable the Debug option?

Yes, I also tried toggling Fast Refresh off.

m4rcoperuano commented 5 years ago

Fixed the issue on my end by double checking that i modified all the files correctly during my RN upgrade, then running watchman watch-del-all, and react-native start --reset-cache. Then on android, build -> clean. then it worked! sigh

Hugo-Meiring commented 5 years ago

Unfortunately, it doesn't work our project (iOS) @m4rcoperuano. Glad it worked for you

radko93 commented 5 years ago

It's hard to suggest anything without any more details, I would say that you can try commenting out some parts of your code and try until you find something.

asielykey commented 5 years ago

Fixed the issue on my end by double checking that i modified all the files correctly during my RN upgrade, then running watchman watch-del-all, and react-native start --reset-cache. Then on android, build -> clean. then it worked! sigh

yeah me too, react-native start --reset-cache worked on my case

Hugo-Meiring commented 5 years ago

It's hard to suggest anything without any more details, I would say that you can try commenting out some parts of your code and try until you find something.

Ok will do. This will take a bit of time. We essentially have 2 apps that are linked so changes have to be done for 4 environments (2x iOS and 2x Android). Will report back if I find a solution to this.

eXist-FraGGer commented 5 years ago

@Hugo-Meiring Probably you use modules that were removed from react-native. For example ViewPagerAndroid

Hugo-Meiring commented 5 years ago

So, unfortunately, I just can't get this working. If I get iOS working, Android breaks. If android is working, iOS breaks. This is just one of the issues that I ping pong between depending on the platform.

I can't spend more time on this as this is cutting into the release schedule. Will go with a temporary fix of splitting iOS and Android between different react versions and making adjustments to the CI/CD pipeline. A very nasty solution but it might be for the better. We can possibly move all our shared code to a separate repo while we analyze our options.

gaguirre commented 5 years ago

@Hugo-Meiring I'm facing a similar issue on a monorepo (using lerna and yarn workspaces). Is this your case too?

I found that everything works ok when I start the app without using anything from an external package. Even the fast refresh works correctly if I comment the LOC related to external packages, start the app and finally un-comment those lines.

ra0x3 commented 5 years ago

Also ran into this (setup below). Took a bit of @m4rcoperuano 's solution and just stopped my simulator and bundler, then removed everything in watchman via watchman watch-del-all. Restarted the simulator via react-native run-ios and everything works fine.

Setup

react-native-cli: 2.0.1
react-native: 0.61.2
mac OSmojave 10.14.6
djohnsonkc commented 5 years ago

This resolved it for me:

$ cd ios && rm -rf Pods && pod cache clean --all && pod install && cd ..

I forgot that I had done a "yarn add ..." on a few NPM modules and forgot to reinstall the pods.

ralph-dev commented 5 years ago

I have fixed this error, can confirm it's because one of your libraries isn't linked correctly. Fastest way to fix this is starting from index.js to app.js commenting out imports. Once you've commented out enough libraries the app should work then you will know which library was not linked correctly. Some libraries that say they have auto-linking actually don't..... It's very tedious but this works and my app is now fully functioning!

schumannd commented 4 years ago

Why does it have to be so difficult to find out WHICH Native Module cannot be null?

kalmahik commented 4 years ago

Hi! I have the same issue, both on android and iOS. I just remove node_modules and install again, it helps me) no other cleans or rebuilds has no effect(

AdrianMrn commented 4 years ago

This is just a vague error to tell you there's something wrong with one of your imports. It can have different causes and has different solutions for each cause. In my case, this was happening because of a circular dependency.

sankar2389 commented 4 years ago

Also ran into this (setup below). Took a bit of @m4rcoperuano 's solution and just stopped my simulator and bundler, then removed everything in watchman via watchman watch-del-all. Restarted the simulator via react-native run-ios and everything works fine.

Setup

react-native-cli: 2.0.1
react-native: 0.61.2
mac OSmojave 10.14.6

https://github.com/react-native-community/cli#compatibility denotes that react-native 0.61.X needs react-native-cli: 3.0.0

nandorojo commented 4 years ago

This solved it for me, using a managed Expo project:

expo start --ios -c
msand commented 4 years ago

Another possible reason for this is that there are multiple versions of react-native in node_modules

msand commented 4 years ago

Try searching for registerCallableModule('AppRegistry' in node_modules, if you find more than one, that's a likely reason

tnortman commented 4 years ago

@Hugo-Meiring Probably you use modules that were removed from react-native. For example ViewPagerAndroid

This was the issue for us - we jumped from RN 0.58 to RN 0.61.5 where some RN stock components were removed. ViewPagerAndroid, AsyncStorage, ListView were the culprits for us.

niclin commented 4 years ago

I face same problem just now and try any suggestion but noting change 😢

when I remove my computer everywhere node_modules I resolve this issue for me!!! (because my disk will full)

so I guess maybe are multiple versions of react-native in node_modules ?

my steps

  1. sudo find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
  2. reinstall yarn
  3. run yarn in my porject
  4. xcode -> clean build folder
  5. iOS APP is working!!!!
tahaphuong commented 4 years ago

i had the same problem, when i used react-navigation package, but i had not downloaded all the required "side-packages" (particularly is react-native-reanimated). The problem may come from one of your import. Check the guide of all packages carefully, you would definitely find a way. Good luck!!

thiagodevvv commented 4 years ago

Também deparei com isso (configuração abaixo). Peguei um pouco da solução do @ m4rcoperuano e parei meu simulador e empacotador, depois removi tudo no watchman via watchman watch-del-all. Reiniciei o simulador via react-native run-iose tudo funciona bem.

Configuração

react-native-cli: 2.0.1
react-native: 0.61.2
mac OSmojave 10.14.6

it worked for me

henriquecorraro commented 4 years ago

cd ios remove pods pod install worked for me

KEMBL commented 4 years ago

who have this problem in Android mono repo (I have not tried this with ios): as @msand mentioned the problem could be in many registerCallableModule('AppRegistry' in your result bundle. Multiple occurrences could be because of using react-native components from other monorepo packages.

So we need to remove them from the bundle: 1) react-native run-android 2) Download bundle (from http://127.0.0.1:8081/index.bundle?platform=android&dev=true&minify=false), open it and inspect for the discussing substring 3) Now we need to block node_modules loading from the found places except the first one 4) Add into metro.config.js into resolver / blacklistRE patterns like this blacklistRE: /(.*\\component1\\node_modules\\.*|.*\\component2\\node_modules\\.*|.*\\component3\\node_modules\\.*)$/

5) start again react-native run-android 6) check bundle again, it should contain only one registerCallableModule('AppRegistry' 7) check how code works on a device.

in gap 4) you probably need to make more particular regexes if your components use "nohoist" components.

as a bonus - smaller bundle size. :)

dbrunonascimento commented 4 years ago

who have this problem in Android mono repo (I have not tried this with ios): as @msand mentioned the problem could be in many registerCallableModule('AppRegistry' in your result bundle. Multiple occurrences could be because of using react-native components from other monorepo packages.

So we need to remove them from the bundle:

  1. react-native run-android
  2. Download bundle (from http://127.0.0.1:8081/index.bundle?platform=android&dev=true&minify=false), open it and inspect for the discussing substring
  3. Now we need to block node_modules loading from the found places except the first one
  4. Add into metro.config.js into resolver / blacklistRE patterns like this blacklistRE: /(.*\\component1\\node_modules\\.*|.*\\component2\\node_modules\\.*|.*\\component3\\node_modules\\.*)$/
  5. start again react-native run-android
  6. check bundle again, it should contain only one registerCallableModule('AppRegistry'
  7. check how code works on a device.

in gap 4) you probably need to make more particular regexes if your components use "nohoist" components.

as a bonus - smaller bundle size. :)

module.exports = {
  ...
  resolver: {
    blacklistRE: /(.*\/component\/node_modules\/.*)$/,
  },
 ... 
};
MaxMotovilov commented 4 years ago

It appears that delaying the first call to AppRegistry.registerComponent() until an asynchronous event occurs is sufficient to cause this problem. I have originally run into it due to a call to fetch() but it reproduces with something as simple as the default application created by react-native init if you change AppRegistry.registerComponent(appName, () => App); to setTimeout( () => AppRegistry.registerComponent(appName, () => App), 0 ); Notably, changing setTimeout() to setImmediate() in the above example made the issue go away for me.

prakashsaran commented 4 years ago

just try yarn/npm install in your root folder of project :thinking:

wa-Nadoo commented 4 years ago

I got the same issue when I added a 3rd party library with components. The root of the problem was that the library includes react, react-native, react-navigation as direct dependencies ("dependencies" field in package.json). After moving these dependencies to "peerDependencies" field of library package.json the error gone.

alitele commented 4 years ago

Simple close the metro shell and re-run app.

lukecaan commented 4 years ago

Getting the same issue, in a monorepo where my redux logic lives in a shared module alongside a react-dom and react-native project ... commenting out my imports doesn't seem to change anything but the error does disappear if I comment out the redux I'm trying to render ... anyone got any clues?? As a newbie to react-native and monorepos this whole process has been a NIGHTMARE 😭

tomoima525 commented 4 years ago

@lukecaan look into metro's blackList. With that you can make your app not seeing redundant libraries under redux's node_modules Ref: https://stackoverflow.com/questions/41813211/how-to-make-react-native-packager-ignore-certain-directories

osamagamal7 commented 4 years ago

I've spent a decent time figuring out what's causing this error, but still the same. I closed the metro bundler and ran: npm start and it worked, this is weird.

Pony-Unicorn commented 4 years ago

It appears that delaying the first call to AppRegistry.registerComponent() until an asynchronous event occurs is sufficient to cause this problem. I have originally run into it due to a call to fetch() but it reproduces with something as simple as the default application created by react-native init if you change AppRegistry.registerComponent(appName, () => App); to setTimeout( () => AppRegistry.registerComponent(appName, () => App), 0 ); Notably, changing setTimeout() to setImmediate() in the above example made the issue go away for me.

I am also a bug caused by asynchrony！

rpsutton commented 4 years ago

I had the same issue for IOS, which appeared to pop up out of nowhere. Unfortunately, like @ralph-dev, I found the only thing that worked was going through every import statement to discover the faulty import.

runryan commented 4 years ago

It worked for me this way. Just terminated the metro and reran yarn ios.

JakubRimal commented 4 years ago

Also try Android Studio: File > Sync Project with Gradle Files, it worked for me. :tada:

merci18 commented 4 years ago

Just run npm install then re-run npm install -g react-native-cli , it worked for me

ashokrajbathu commented 4 years ago

Why does it have to be so difficult to find out WHICH Native Module cannot be null?

Exactly....After a long frustrating period, I decided to understand what does it mean actually. As far as I understand it is trying to tell that some npm package is identified in your node modules and it's not just enough to install the package but you have to add some code in ios in order to make that package works.

In my case I have installed npm package of react-native-push-notifications and done all the required changes in android but not in IOS. my ios app which used to work fine suddenly started giving me this clueless error. Finally, I have solved it. thanks to everyone.

adamjuhasz commented 4 years ago

On iOS we followed @MaxMotovilov's suggestion about problems with delaying calling AppRegistry.registerComponent(appName, () => App). When we no longer waited for other components to load, all was good

Prev

async () => {
  await analytics.setup();
  AppRegistry.registerComponent(appName, () => App);
};

Working


() => {
  analytics.setup().catch(/* */);
  AppRegistry.registerComponent(appName, () => App);
};
NullPainter2 commented 4 years ago

Hi

I had this exception too. I solved my problem.

What is problem?

RN has Message Queue which tries to dynamically dispatch a message AppRegistry::runApplication. In my case Message Queue did not have key "AppRegistry" associated with object AppRegistry. App threw exception Invariant Violation: Module AppRegistry is not a registered callabel module (calling runApplication).

Why it happened?

After You import AppRegistry You have to call any method, 

import { Text, AppRegistry } from 'react-native';

const App = (props) => (
  <View>
    <Text>App1</Text>
  </View>
);

AppRegistry.registerComponent('Appname', () => App);

because it has getter which lazy loads real app registry module

 get AppRegistry(): AppRegistry {
    return require('./Libraries/ReactNative/AppRegistry');
  },

and this module is added to to MessageQueue

BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);

Why I had this problem?

I inherited some codebase with async registration of components, which did not made AppRegistry to be added to MessageQueue sooner than event AppRegistry::runApplication fired .

How did I fix this?

Since it does not matter what method of AppRegistry I call, something like this on will do

// call this as soon as possible so AppRegistry is available to RN MessageQueue
AppRegistry.registerComponent('DummyComponent', () => DummyComponent);

How would I fix this?

Thanks

UltimatePea commented 4 years ago

For us, the error happens because one of our components in the top-level router is not written correctly, so there are multiple errors in the log. This error happens to be the last one thus we ignored the prior error. We found this out by reading the entire log from bottom to top.

joaofelipemr commented 4 years ago

Try:

  1. unlink the packages you've done manually
  2. cd ios && rm -rf Pods && pod cache clean --all && pod install && cd .. (@djohnsonkc)
  3. close the metro shell and re-run app. (@alitele)
minhaics commented 4 years ago

i had the same problem, when i used react-navigation package, but i had not downloaded all the required "side-packages" (particularly is react-native-reanimated). The problem may come from one of your import. Check the guide of all packages carefully, you would definitely find a way. Good luck!!

hello let's be friends! Could you please give me your facebook profile!