I am working on my React Native app built with expo. Today I was really bothered by the console that all the time was reminding me that there is a new version of expo, so I decided to update it. I followed the steps given on the expo docs. Everything in update seemed working fine but in nearly a half command :
expo upgrade stacked and returned me this error expo NPM ERR
I listed previous solutions that I should check my package.json file and app.json file to match the sdk versions but I got all three set up on the same :
{
"expo": {
"name": "bakalarka",
"slug": "bakalarka",
"privacy": "public",
"sdkVersion": "36.0.0", ...
and my package.json file:
"dependencies": {
"core-js": "^3.6.4",
"expo": "^36.0.0",
"expo-font": "~8.0.0",
"expo-image-picker": "~8.0.1",
"expo-linear-gradient": "~8.0.0",
"linear-gradient": "^1.0.6",
"moment": "^2.24.0",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", ...
When I just want to start the app my Android emulator shows me error as: React native version mismatch.
Does anyone know where might be the problem?
Thank you in advance! :)
Execute expo update from your project.
Try replacing your last line with:
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
Have you tried following?
deleting your node_modules
npm install
use it
ncu -u
to your cmd, it will update your expo SDK
Related
I think that when I upgraded to React 18, React broke a part of my app. I wanted to verify this behavior by simply using my previous package.json file which I saved as package-previous.json.
I'm assuming webpack allows one to simply change the package.json file to restore a previous app configuration, but I wanted to make sure there are no caveats.
I'm going back from:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6"
},
to:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6"
},
There's no problem with updating the dependency versions in your package.json; if the dependencies you changed are already installed, you can run npm update to upgrade or downgrade their versions, otherwise, you should run npm install.
This will update your node_modules and your package-lock.json files.
I recently upgraded React and several other packages to their latest versions, and every since, have been seeing warning messages in my Chrome console referring to bundled files instead of mapped files.
Example: at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25) instead of at SelectInput (Select.tsx:123)
I'm using the latest versions of chrome and React Devtools.
Here are my dependency versions in package.json:
dependencies {
"#babel/runtime": "^7.18.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#types/node": "^15.12.2",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3"
}
I see this older solution Console logging error on bundle.js instead of React component but cannot find webpack.config.js to make updates, nor am I sure if it applies to these newer package updates.
How can I see the mapped file names in the chrome console?
I have found that webpack is default installed in create-react-app.
And I found that installing rewire allows at least to modify the webpack configuration.
That is not yet the full solution, but at least one step.
Reactjs project with sub dependency of core-js v3.20.0 breaks page with error o.next is not a function.
Using npm ls core-js I see that react-app-polyfill#2.0.0 requires core-js and is installing the latest version (3.21.1 - to be exact) in turn breaking the page. (Fix at bottom of screen)
This is more a question of why. This is a difficult error to reproduce so apologies for no code examples, just wondering if anyone else has experienced this error and would like to share thoughts around the major differences between core-js 3.20.0(broken) and 3.7.0 (working). Main reason is I would not like to be locked to this version. Wondering if it is another package that starts this conflict crash.
Example of dependencies used:
- "react": "17.0.2",
- "react-app-polyfill": "2.0.0",
- "ts-loader": "9.2.3",
- "ts-node": "10.1.0",
- "typescript": "4.3.5",
- "webpack": "5.66.0",
- "webpack-cli": "4.9.1",
- "webpack-dev-server": "4.7.3",
- "webpack-merge": "5.8.0"
File that is the culprit:
vendor/tslib.js
Fix:
Downgrading core-js sub dependency from 3.20.0 to 3.7.0 fixes the page and removes the error message o.next is not a function.
To force this, I added a preinstall hook to install the working version of core.js.
Example:
scripts: {
"preinstall": "npx npm-force-resolutions",
},
"resolutions": {
"core-js": "3.7.0"
},
The app installs and opens but right when it opens this red screen appears with the below error message.
TBH I am not quite sure what I am doing and I really need some help. I was able to get my other project to work but when I started my second project this came up when trying to run the code. The code is just the basic code you get when you run: react-native init projectName
Change the version of "babel-preset-react-native" to "4.0.0". For the lastest version 5.0.0, the issue arises.
Run npm install after the version change. Then start the emulator.
Even then if you face issue, delete your node_modules directory, repeat step 1.
Restart your machine if you see the issue again even after all tries.
Check github issue
I got the above mentioned error just now. I am using React Native v0.57 and my json file had this
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.6",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
I added "babel-preset-react-native": "4.0.0", and removed "metro-react-native-babel-preset": "0.45.6" in the "devDependencies" and the error was resolved.
Jonathan's solution worked for me as well:
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
I have upgraded to
"react-native": 0.57.7
"metro-react-native-babel-preset": "0.48.5",
Now the bundle is loading as expected.
My current version:
"react-native": "0.57.8",
"metro-react-native-babel-preset": "0.51.1",
Here how I fixed:
add
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
remove node_modules
npm install
Voilà! It works!
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
^^ what they said... change your "babel-preset-react-native" to 4.0.0 .
Try this command
react-native upgrade
Had the same issue. Downgrading to "babel-preset-react-native": "4.0.0", did not work.
running this worked for me
npm add #babel/runtime
Try the followings:
clean the build folder and try again.
run react-native start --reset-cache in one tab
and then
run react-native in another tab
For me this answer worked:
https://stackoverflow.com/a/40966360/4483716
Basically I needed to give permission to folder
/Users/[username]/Library/LaunchAgents.
Use this command:
$ sudo chown $(whoami) /Users/$(whoami)/Library/LaunchAgents
Add babel-preset-react-native version 4.0.0 to your devDependencies in package.json
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
npm install
react-native run-ios or android
If it still doesn't work try rm -rf node_modules/ and redo step 2 & 3
I'm starting to learn React Native, and found out that React Native development can be done on Windows also (thanks to UWP). And, I find this blog (https://shift.infinite.red/getting-started-with-react-native-development-for-windows-ba23a4be90b6#.c117cuwmy) which details the steps on how to install and create React Native project and configure for Windows development. I'm running Windows 10 and have already set developer features to Developer mode under Settings. However, when I tried to initialize windows (run react-native windows), I got an error saying "Could not find react-native-windows#0.41.. Latest version of react-native-windows is 0.40.0-rc.1, try switching to react-native#0.40.." (see screen capture below)
I changed react-native dependencies in package.json under my project folder to 0.39.1 (as mentioned in the blog), but still it doesn't work.
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2"
},
This is the structure inside package.json
{
"name": "MyFirstProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "18.1.0",
"react-test-renderer": "15.4.2",
"rnpm-plugin-windows": "^0.2.3"
},
"jest": {
"preset": "react-native"
}
}
The CLI windows plugin is at rnpm-plugin-windows#0.2.3
Did I miss an important step which caused this error? Any help is greatly appreciated.
First, let me say that React Native Windows also supports WPF+.NET 4.6 so you can also deploy to Windows 7 and 8.1 with the same 90+% code sharing you get between other React Native platforms.
As mentioned in the React Native Windows FAQ, you can get past this particular error by specifying an older version of react-native when creating your project:
react-native windows --windowsVersion 0.40.0-rc.1
React Native Windows generally keeps up with upstream releases, but sometimes it can take a few days to catch up. This workaround allows you to get started and then update later.
#MattHargett is correct, but at least for me, I had to be a little more specific in order to get 0.57 installed. Perhaps the syntax isn't quite up to date...
For me, I had to:
react-native windows --windowsVersion react-native-windows#0.57