I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?
I upgraded my project from expo 44 to expo 45 and now I have inumerous errors like this:
The module 'MaterialIcons' can't be used as JSX component.
This error is happening with many libraries like react-native-paper, react-native-elements and even the native ones like expo-vector-icons.
If I rollback the upgrade everything gets back to normal, but I need to update to avoid having to do this later.
obs: I'm using typescript
Solved my problem by adding:
"resolutions": {
"#types/react": "^17"
}
to my package.json file.
It looks like yarn was using two different #types/react for the libraries, and this solved the issue.
I have an existing project updating to react-scripts#5.0.0. Trying to build or run the dev server is resulting in
TypeError: The 'compilation' argument must be an instance of Compilation
Following recommendations that this is due to conflicting webpack versions I found the following in my node_modules.
node_modules/webpack
node_modules/react-scripts/config/webpack
node_modules/react-scripts/node_modules/.bin/webpack <--- the culprit
node_modules/react-scripts/node_modules/webpack
If I generate a fresh project using CRA all works find and node_modules looks like this
node_modules/webpack
node_modules/react-scripts/config/webpack
Deleting the extra webpack under node_modules/react-scripts/node_modules/ makes my project start working but running an npm install causes it to come back.
Where could this be coming from? Why does my project bring this in but a fresh CRA project does not?
Update 1
I should mention that adding overrides to my package.json didn't help.
"overrides": {
"webpack": "5.70.0"
}
Removing the corresponding react-scripts/node_modules/webpack entries from package-lock.json cleared this up.
When I try to debug my app with React Native Debugger I got that error: "
error from react native debugger
then I do that instruction. install react devtool, and nothin happen.
I think, maybe, I have some error when installing the package, so I run react devtools and see that current version 4.23.0
react-devtools version
so anybody have any idea how I can fix that problem?
I "npm install"ed 'react-devtools' and 'react-devtools-core' and set them to the same version
"react-devtools": "~4.14.0",
"react-devtools-core": "~4.14.0",
and re-installed everything by deleting package-lock.json and node_modules
then ran npm install and it worked
I think the problem was those packages not being the same version
If anyone else is seeing this dialog:
Here is the solution which worked for me on M1 Mac:
Uninstall the homebrew version of react-native-debugger and install the react-native-debugger_0.11.7.dmg binary.
More info here
I tried to sync both versions by doing the fresh global and local install.
But after a long time, the local combination and resolutions for the version worked for me.
I added the following in packege.json as dev depedencies.
"react-devtools": "~4.24.5",
"react-devtools-core": "~4.24.5"
And
"resolutions": {
"react-native/react-devtools-core": "4.24.0"
},
Restarted the env, opened yarn react-devtools, and then opened dev menu and select inspect options and it got connected to dev tools and I was able to inspect my UI components in devtools.
when I am trying to execute npm start it works fine, but when i try to run my application by expo the process goes till 100% and after that nothing happens. I am not getting what is exact issue over there. I am having following things in package.json.... please help me to resolve this issue.
{
"name": "ProMeeting",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~29.0.0",
"react-native-scripts": "^1.14.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#babel/preset-react": "^7.0.0-beta.56",
"expo": "^29.0.0",
"firebase": "^5.3.1",
"native-base": "^2.7.2",
"react": "16.3.1",
"react-native": "^0.55.4",
"react-native-firebase": "^4.3.8",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.11.2"
}
}
Screenshot added for illustration purpose
It seems there are multiple reasons why this could happen. I tried to run other apps on my simulator, restarted my simulator and even tried to delete the build folders and rebuild from scratch, but none of these approaches solved the issue.
What finally worked was restarting the React Native Debugger that I had on in the background the entire time.
You can also check the Network tab of React Native Debugger if you've enabled Offline throttling. Disabling it should also solve the issue in some cases.
In my case this always happened when I remote JS debugging was turned on. The JS bundle would load to 100%, but then the app was stuck. React Native Debugger could not connect, with the error message Another debugger is already connected.
After trying all kinds of things (cache resets, restarting Metro builder, restarting simulator) without any luck, I remembered that the only "other debugger" I had ever used were the Chrome Devtools, so I quit Chrome, and immediately everything was working again.
Turns out, even though I had closed the Chrome tab where I had been debugging the app, some background process in Chrome was still attached as a debugger to the app (also after reboots of the simulator). Then it hit some kind of breakpoint or exception on startup, so it paused, and all I could see was the Downloading Javascript bundle 100% message.
This is how I resolved the issue in Mac.
My screen was stuck at Downloading javascript bundle 100%
Select Simulator, Press (Command + D) in Mac, the simulator will display the set of options.
The Application will now load
In my case, my code worked in Android, but not in iOS simulator.
SplashScreen.preventAutoHide(); was the problem.
I called the method twice, App.js and Main.js, respectively.
After removing it in the App.js, it worked.
(I think restarting the React Native Debugger helped as well)
react-native-firebase often cause same issue.
below is official integration guide of react-native-firebase.
https://rnfirebase.io/docs/v5.x.x/installation/ios
B) At the beginning of the didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method add the following line:
[FIRApp configure];
"It is recommended to add the line within the method BEFORE creating the RCTRootView. Otherwise the initialization can occur after already being required in your JavaScript code - leading to app not initialised exceptions."
Do you have GoogleService-Info.plist?
Did you pod install?
Did you Hardware > Erase all Contents and settings in simulator?
I also stuck at the same problem and did every possible thing but it not worked, I revert every change but still the issue is there..
I created my own solution and it works perfectly for me, maybe it might help someone, you can try it with Apple and Android too
Update expo-cli and react-native with npm update -g expo-cli and npm update -g react-native
Uninstall expo app on emulator or device and reinstall it
Create new project with expo init project_name (use your original project name, rename the previous for backup).
Try to run this new blank app in your expo app, it should run properly.
Now install every dependency from non working package.json one by one or in bulk but without giving version using command expo install package_name (Manually because it might be possible because of version conflict).
Now add your old project files and directories including app.json and App.js to this new project.
Run your project again with expo start -c command.
And here you go with your working project!
Happy Coding!!!
As of January 2021, your node version may be one of the causes of this problem.
Check your node version using node -v and if the version is 15.x.x, try downgrading the version to 14.15.1:
$ npm install -g n
$ n 14.15.1
In my case, When i was tried with physical device then try to install in simulator. Then its got stuck like it. I solved the problem after stopped the debugger. For that use below steps.
Android:
Go to settings in mobile >> Installed Apps >> choose your app and click on clear Data.
uninstall your existing app and try to install .
IoS:
Uninstall the exist app and try to install as new.
Shake your device and stop debug and try again to install.
Well in my case I removed a for loop that I had in my code and it was enough to fix this issue. Apparently my react app was crashing everytime it run that loop.
in my case ;
I added a new package ( #khanshamshad32/carousel ) v1.0.1 . i guess package has problems and my expo on real device stuck %100.. and im going to delete all of items package.
1- from package.json (relative instance)
2- from package-lock.json (relative instance)
3- from "package name" folder of node_modules
and it did work
You should try setting up a new react-native project and transfer your files to the new project and then try running it again, this issue occurs when build files are missing
well this post is old but lets go,
how I solved this problem for myself:
> install yarn
> run: yarn remove react-native
> run: yarn add react-native
> run: react-native run-android