react-native: Invariant Violation: Module AppRegistry is not a registered callabel module (calling runApplication)
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
- Update the package.json values to use latest 0.61.1 (and other latest values pulled for a
react-native init) - 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.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 99
- Comments: 158 (6 by maintainers)
Links to this issue
Commits related to this issue
- :bug: 删除package.json中对react/react-native的devDependence,修复无法直接引用的bug ref:https://github.com/facebook/react-native/issues/26687\#issuecomment-609099616 — committed to Zack-Bee/react-native-p2p-rtmp-player by Zack-Bee 4 years ago
- configure and fix issue with https://github.com/facebook/react-native/issues/26687\#issuecomment-542308900 — committed to edapess/estore by edapess 2 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, andreact-native start --reset-cache. Then on android, build -> clean. then it worked! sighReact Native! You are a problem bitch. I hate you!!!
Why does it have to be so difficult to find out WHICH Native Module cannot be null?
Unfortunately, this error does not give any feedback on what exactly is wrong. You need to dig deeper.
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!
yeah me too, react-native start --reset-cache worked on my case
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.
Simple close the metro shell and re-run app.
Try searching for
registerCallableModule('AppRegistry'in node_modules, if you find more than one, that’s a likely reasonAnother possible reason for this is that there are multiple versions of react-native in node_modules
@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.
This solved it for me, using a managed Expo project:
Just spent a couple hours trying to figure this out, tried everything, and turns out it was because I was calling Stylesheet without importing it in one file…
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:
react-native run-android
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
Now we need to block node_modules loading from the found places except the first one
Add into metro.config.js into resolver / blacklistRE patterns like this
blacklistRE: /(.*\\component1\\node_modules\\.*|.*\\component2\\node_modules\\.*|.*\\component3\\node_modules\\.*)$/start again react-native run-android
check bundle again, it should contain only one registerCallableModule(‘AppRegistry’
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. 😃
Unfortunately, it doesn’t work our project (iOS) @m4rcoperuano. Glad it worked for you
Here are logs from Xcode:
Upgrating from react-native:“0.62.2” to “0.63.1” give me this error.
For me it’s imposible to upgrade react-native without getting an error. It’s amazing…
Downgraded back from 0.63.2 to 0.61.5…fixed the problem. Hopefully RN team will address this with next release and then Ill upgrade again
Getting this same issue but only on Android. Very weird 😦
hello let’s be friends! Could you please give me your facebook profile!
An Error like for me as well, after I upgraded to RN 0.65.1 and this is the real pain, I upgraded from RN 0.60.3.
facing same issue on “react-native”: “0.64.2”
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,ListViewwere the culprits for us.I think there is no solution for this, for me it worked after reinstalling and clearing caches several times,
My steps was,
removed node_module removed Pods folder in ios
repeated several time suddenly it worked. 😕
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.
just try yarn/npm install in your root folder of project 🤔
any update on this issue? it still happens on Android. my RN version is 0.64.0
why is this still not addressed for over an year?
I really don’t know how to explain, but for me, when this happens, I just close everything (Visual Studio, Android Studio, Emulators) and reopen them. After that, my app starts to work again. It´s very weird but I got this Module AppRegistry error many times and every time I restarted all the programs, my app “came back to life”. It doesn’t hurt to try!
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.
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!!
@Hugo-Meiring Probably you use modules that were removed from
react-native. For exampleViewPagerAndroidThey should at least provide a more descriptive error message.
They’ll provide error boundaries for OTHER devs to use, but god forbid they add decent error reporting on their own software.
(To be clear, I don’t blame the devs, I blame bad software company policies that rush 99% of software developers now a days and encourage garbage quality, for the sake of short term market increase.)
I ran into this issue when updating to RN 0.63.3, we figured out it was because we were importing a library which had a dependency on an older version of react, hence two react native versions were being loaded into the yarn lockfile.
Could be something for you guys to check out - take a look at the lockfile and ensure there’s only one version of react native in there.
this error occurs when you add dependency without linking it with
react-native link, to fix this you need to remove the dependency, reinstall it and link it withreact-native link(there are only certain dependencies that must be linked)
So I have been roped back into this project because the issue was resurfaced again. The initial issue was eventually resolved by:
I love @ralph-dev 's fastest way suggestion and agree. We will take that route first. That should work, then we can update to react native 0.63.x. Else we will need to do the above like previously. Will report back. All the other suggestions have been tried by the dev that took over from me.
Final note, to those that find this. Especially with some very complex issues, ones where the compilers fail because of a compiler bug, no output or stack trace is given or the crash is not even in any code remotely related or identifiable to you, where Google has no results (not even in Chinese, google translate is amazing and has helped immensely) and there is no smart strategy the way I found to solve the issue as last resort is a binary search. Keeping dividing your code into half (not literally) and disable the one “half”. Keep doing this until you hit the issue. It grows exponentially and you will soon get to the issue within 8 - 20 levels deep.
I’ve had this issue multiple times and in every one of them I used a different solution. I always come here, like a retard, see that it’s a vague error and end up just digging around my code and ultimately finding something dumb that I’ve done that broke my app. This last time, I had literally no idea what could be wrong. So I just ran pod install and npm install. Restarted the server, rebuilt the projects and it worked… MAGIC!
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,
because it has getter which lazy loads real app registry module
and this module is added to to MessageQueue
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::runApplicationfired .How did I fix this?
Since it does not matter what method of AppRegistry I call, something like this on will do
How would I fix this?
react-native init, but it is not explained)Thanks
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 tofetch()but it reproduces with something as simple as the default application created byreact-native initif you changeAppRegistry.registerComponent(appName, () => App);tosetTimeout( () => AppRegistry.registerComponent(appName, () => App), 0 );Notably, changingsetTimeout()tosetImmediate()in the above example made the issue go away for me.For me this helped me find the problem, to which file was causing the error. (Root cause)
I made sure my metro.config.js file contained this line:
inlineRequires: true,One single error but there might be multiple causes. Seeing a lot of diverse discussions in the community means this issue could be hard to find. Try to proceed with the following.
If you still cannot find the issue with the above, remove some imports or screens from your App.js. Going with this you can find what exactly caused this error. This is how I found my issue after a day of research.
Another thing that can cause this is if you’re smart like me and accidentally leave the
storyNameof one of your Storybook stories empty 🤦 😂yeah me too, react-native start --reset-cache worked on my case (ANDROID)
I’m having this issue too and my app is just a simple webview app. React Native version is 0.63.4
Finally I was able to resolved this issue by replacing extends TextInput with extends React.Component in a custom TextInput component. I was experiencing this issue after upgrading the react native version from 0.61.2 to 0.63.3.
Example: Before Fix: import React from ‘react’; import {TextInput} from ‘react-native’; class CustomTextInput extends TextInput{ render(){ /code/ } }
After Fix:(Working code): import React from ‘react’; import {TextInput} from ‘react-native’; class CustomTextInput extends React.Component{ render(){ /code/ } }
I am facing this issue many times. why Facebook is not taking it seriously.
can anyone tell how to fix this?
For ios i’ve only intalled pod, the command i recommend is:
cd ios; pod install; cd ..I consider that this is produced when i installed react-navigation on my node_modules, and then i forgot to install the pod files related to this new dependency. Then hit on clear build, close and open xcode and runI was having this issue on iOS and not Android. This made me think it was likely a bad module install for the iOS platform. After some debugging I found out it was
react-native-unimodules. I had set it up badly setup on iOS.Now that in itself may be useful, but likely not. I’d like to share my approach, as that is more useful.
Start in
App.tsxand start cutting components/children out one by one until it builds something successfully. (I placed a dummy<View>with a<Text>so I knew when it was successful.)Once its loaded - add the offending component/line back in, and let FastRefresh reload your app.
In my case - and I hope in your case too - the error will now be different! This is because the initial App registration was complete, and FastRefresh must work a different way.
Look at the error - hopefully it’s useful! (Mine mentioned
unimodules- aha!)That made then finding the issue a lot lot simpler.
Best of luck! 🤞🏼
@xchmelmilos excuse me you are right again, the following error log appears without preloading AppRegistry:
I was mistaken because
ReactRootView: runApplication: call AppRegistry.runApplicationis aEerror log and I was interpreting it as an error while it is probably not one.So all is good, you hotfix works indeed. But shouldn’t it be fixed right within RN?
@xchmelmilos you were right. I’ve added this:
At the very beginning of my
index.jsfile and the error is gone…I’m a bit puzzled here: -> I did not need to do that with RN 0.61. -> I do not use
AppRegistrydirectly as I am using react-native-navigation…So I guess I should now try to identify which call where causing this race condition right?
With react native navigation alone, I do not get this error. So there is something in our code that get executed before RNN and after startup, that causes it…
If you have any hint/suggestion on how to proceed faster and more reliably to find it, please do not hesitate to tell me…
Once again thanks for your help @xchmelmilos!
Edit: for anyone using RNN, there is this issue there which is related.
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 goodPrev
Working
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.
I face same problem just now and try any suggestion but noting change 😢
when I remove my computer everywhere
node_modulesI 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
sudo find . -name "node_modules" -type d -prune -exec rm -rf '{}' +yarnin my porjectFor anyone else who facing the same issue and cannot resolve it with every solution you found on the internet, maybe you shoud check if there is a
node_modulefolder inside yoursrcorcomponentsfolder. It wasted me half a day and I finally found the reason: I executednpm iinside in a deeper path of my project , Holy shit…Best solution 🥳 , I was investigating by eliminating imports from my index.js, until I found the problem. Thanks!
1- update your react-native-reanimated library to “react-native-reanimated”: “2.0.0”
2- You should update the babel.config.json file and add react-native-reanimated/plugin to plugins 3- run this command
react-native start --reset-cacheThis will fix your issue
For me, the issue was my application package name. Actually, I was reusing the source code of the existing app to make a replica of the same app. So I kept the “build_config_package” the same as an old app but changes the package name.
If you tried all options given and not working, the issue is with the Drawer navigator Sometimes this will fix it npm install --save @babel/runtime
npx react-native init proj_nameyarn install && yarn iosyarn add ...Invariant moduleerror(after install
react-native-modal-datetime-pickerandreact-native-webview).yarn removeTried everything and couldn’t make it work for iOS (but Android works). Here are some scripts useful to clean and build:
Okay, finally I was able to fix this. I’ll post what worked for me.
I was using
yupnpm module and when I checked the import statement, I was usingimport yup from "yup";whereas what I should’ve done is
import * as yup from "yup";Silly me! 😃 Credit to @ralph-dev
thanks for the proposed solutions, i will put my answer because it worked for me and maybe it can help someone else, thanks to @ralph-dev, for me it was the @react-navigation/web, actually it was blocking everything, so i deleted all imports: import { Link } from ‘@react-navigation/web’ in every file, and it worked like a magic, hope this helps someone
I am pretty sure problems is that apps are sending messages in wrong order or too late (?) into message queue between cpp and javascript. I looked into this problem like a half a Year ago … It was investigated like once or twice here already, which I guess almost no one reads and people here are re-posting same solutions every week …
This does not have higher priority because a) You can ignore this error b) it is not user facing c) it is not app breaking, Facebook has now like 987 errors which are 😄
Also I am pretty sure ignoring hundreds of comments on this issue is not DX which Facebook claims it has 😄
I forgot how I manually fixed mine, all I remember is you just reset the cache in your app, as long as you just reset it then a new error will appear, but in others, they says nothing comes out, but the only important thing is that when you are sure that your app is okay, you may need to reset the cache of your app so that you can see a new error message, but if it does not really change, you will need to re-build it to refresh the native components in your mobile app, then see if it is gone, if not, you can restart your computer.
What I still remember and I was able to fix mine was because at night the app still had an error, then I turned off the computer when I went to sleep, then the next day the error disappeared, I am also not sure why
We’ve been able to create a (minimal??) reproducible repo which demonstrates our problem and a soloution:
In our case the
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)was caused by theNavigation.registerComponentcall inside thepersistStorecallback.Moving the
Navigation.registerComponentoutside solved the issue (for us).Why does this happen? No idea…
Good luck everyone out there!
for me expo r -c cleared cache then restart the application worked perfectly for me
Close everything: Server, VS Code, Emulator, Rebuild the by
--reset-cachecommand, and run your app. If still persists, try restarting the system and doing the steps once more.https://stackoverflow.com/a/51304124/11667949
https://stackoverflow.com/a/46826116/11667949
Encountered this issue after upgrading to 0.63.2, commenting out the imports did eventually help as I was able to see some additional error logs. I had 3 libraries giving me issues.
“react-native-paper”: “^4.1.0”, // forced to update from 2.15.2 “react-navigation-material-bottom-tabs”: “^2.3.0”, // forced to update from 1.0.0 “react-native-material-textfield”: applied this patch https://stackoverflow.com/a/62794092/12843101
In our case, there was a bug in a function that was being called at the global level in a module, i.e., at module load time. We had something like this in foo.js:
and then in bar.js we had something like this:
i.e., called foo() at the top level of the module but without the final argument. I doubt it was specific to this particular bug, but the crash at module load time was probably enough to derail the AppRegistry.
That worked for me. Thanks
I had to close metro and run
expo startagain. And it worked.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.
Just run npm install then re-run npm install -g react-native-cli , it worked for me