Proper mechanism to downgrade react-native - javascript

My situation is this :
I had a working copy of a react-native project that was working well. Had it commited to my git repository.
I decided to upgrade react-native to 0.26.3 and then 0.28 and finally ended up in a big dependency mess with collisions. So decided to go back to previous working version. Reverted the changes. Removed node_modules folder from my working directory.
But now npm install just won't work.
My working dependencies in package.json
"dependencies": {
"immutable": "^3.8.1",
"key-mirror": "^1.0.1",
"react": "^15.0.2",
"react-native": "^0.26.0",
"react-native-router-flux": "^3.26.1",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"strformat": "0.0.7"
},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-jest": "^12.1.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react-native": "^1.9.0",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"fetch-mock": "^4.5.4",
"jest-cli": "^12.1.1",
"mocha": "^2.5.3",
"mockery": "^1.7.0",
"nock": "^8.0.0",
"redux-mock-store": "^1.1.1",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"sinon-stub-promise": "^2.0.0"
}
Now I get
npm ERR! peerinvalid The package react#15.1.0 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-native#0.26.3 wants react#15.0.2
npm ERR! peerinvalid Peer react-redux#4.4.5 wants react#^0.14.0 || ^15.0.0-0
This just not makes sense to me, as my react dependency is 15.0.2 and react-native 0.26.0 as you can see in package.json.
Note that this is from a previous commit that was working (the whole lot).
I also did a npm ls. Weirdly wrong dependencies are shown in the tree like wrong versions of react-native, react-native-router-flux, react.
link to ls output

For existing projects if you want to install/downgrade to lower version
npm install react-native#x.x.x ex: npm install react-native#0.43.4
This will install the version specified.
Check the installed version with react-native --version

Update 2020
Just run
npm install react-native#0.43.8
Replace 0.43.8 with version you need.

Please update your react dependency in package.json to explicitly be 15.0.2, not ^15.0.2 since the latter resolves to 15.1.0 which causes this issue. It is recommended to leave it that way until you upgrade for the next time and get this error once again (to avoid react changing its version in the meantime and react-native not being ready for it).
Also, with npm3 EPEERINVALID is no longer an error, but warning.

Downgrading React Native requires manual steps. I recommend using https://react-native-community.github.io/upgrade-helper/ and here are my steps
Set your current version as base and select the previous minor version of react-native
Revert all the changes made to files as displayed in the compare view in step 1
Delete node_modules folder, clear watchman, reset metro cache, delete pods, clear ios and android cached files. npx react-native-clean-project is super helpful.
yarn or npm install and reinstall pods for ios
Make sure all your jest tests, detox tests and manually testing both iOS and Android are working as expected.
(if needed) Repeat the steps to downgrade to another lower version
Suggestion: If you're downgrading multiple minor versions then it might be easier to downgrade one version at a time. For example, downgrading from 0.61.x to 0.58.x, would be less work to downgrade to version 0.60.x first, test and make sure everything works in iOS and Android then move on

Try npm prune and then npm i again.
The command npm prune will basically remove all unwanted packages, and npm i will make sure all missing packages are installed.

If you're using react-native you can modify your package.json file with the versions that you need and then delete all your node modules rm -rf node_modules and then reinstall npm install

If you change the version in Package.json and reinstall npm packages it will make build errors. Please refer and downgrade/upgrade to a specific version.

I tried to downgrade from react-native 0.71.1 to 0.70.4 with just npm i react-native#0.70.4 and fix whatever errors came up. In my case I needed this because the package react-native-vision-camera was not yet compatible with react-native 0.71.1.
But I had dozens of errors, which after I while I started to understand are due to the fact that the whole android folder that is being set up from a template when you run the npx react-native init script, has differences and must match the react-native package version. So I guess if you downgrade a minor version in this way, not just a patch, you are just very lucky if it works somehow. I would not do it.
I instead decided to freshly init react-native with the desired version:
Just git commit all your changes and push them to the remote (to be safe), mv your current project folder to a different name.
Run npx react-native init <YourProjectName> --version 0.70.6 to get the desired version, but make sure to use the same ProjectName, otherwise you might have configuration mismatches.
Integrate your own code from the old project folder (if you forget something git will tell you later), merge configuration files, etc.
add packages by running npm install <package-name> <package-2-name> <etc.) and npm install -D (for devDependencies). Don't copy the dependencies / devDependencies over from package.json, as that way you'll probably not get the right package versions that match your versions of react, react-native etc.
finally copy .git folder from your old project folder into the new one, and check the changes, to make sure you did not forget anything. And then you will actually see all the differences in the template I mentioned above. In my case more than 30 files were different between those minor versions.

Related

React Native console.error version mismatch [duplicate]

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
Getting the following message when I init a new project and then launch the Xcode emulator:
React-Native Version Mismatch
Javascript Version 0.50.1
Native version: 0.50.0
Make sure you have rebuilt the native code. ...
Does anyone know what is going on here and can help me?
This is what I've done with it:
Close all terminals and run build again.
You may forget to close nodejs terminal from another project, and they happen to have installed different react version.
So the code fetches from nodejs server conflicts with the native one.
In case you created your react-native app using create-react-native-app. You should have a app.json (expo). and a package.json file, check if the expo versions match and change accordingly. For example in my case the problem was that in the app.json file I had a 25.0.0 version for the expo sdkVersion attribute, I change that to 23.0.0 and everything worked.
package.json:
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "^0.50.4"
}
app.json:
{
"expo": {
"sdkVersion": "23.0.0" // before was 25.0.0
}
}
Just go to your android/app/build.gradle and then add to the dependencies section:
dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true }
}
/// the react native version can be found in package.json
For Android developers who couldn't get it fixed by just closing and rebuilding, Manually uninstall the app on the emulator/device.
just force react native version in your android's app level gradle file, in the dependencies section.
compile ("com.facebook.react:react-native:0.52.0") { force = true }
worked for me
If you're running your React Native app through Expo, upgrading React Native is liable to cause this error (as noted at https://github.com/expo/expo/issues/923).
If that's your scenario, your options are:
Bump Expo (which is listed in your package.json) to a version that is compatible with your React Native version (if one exists, which may not be the case - judging by the linked issue, I figure that Expo support trails React Native releases).
Discard your changes, delete and reinstall your Node modules, Eject from Expo, and then (after checking that you can still run your app post-ejection) try your upgrade again.
I've never seen this error before, but whenever I can't get Xcode and React-Native to play well together, I do a couple of things. Check what version of Xcode I'm working with. If it needs to be updated, I update it. Then clearing watchman and the cache are the second place I go. I don't use the reset cache command. It always says that I need to verify the cache, so I skip that (you can do it though, I just get confused). I use rm -rf $TMPDIR/react-* to get rid of any cached builds. If that doesn't work, I try to build the app in Xcode, then work my way from there, to build it with react-native run-ios. With this error message, it seems you might start by trying to build it with Xcode. Hope that helps...let me know your progress with it. Good luck! (Also, you could update to RN 0.51 as another attempt to get your versions synced.)
I had this problem for the longest time and none of the above solutions helped. I was in the middle of upgrading react native in a create-react-native-app project until I found out that not all versions of Expo support the latest React Native.
Found this page linked in the documentation that shows which version combinations of React Native, React, and Expo are officially supported:
Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Editing the app.json and package.json files to match the corresponding versions and running npm install got everything working again.
I am using a physical device, in my case this solved the problem:
Uninstall the app
lsof -i :8081
kill -9 PID
Rebuild the app (react-native run-android or react-native run-ios)
In your build.gradle file add the following
implementation ("com.facebook.react:react-native:0.51.0") {
force = true;
}
replace 0.51.0 with the version in your package.json
Try installing the dependencies again. That worked for me-
1.) yarn/npm install
2.) yarn/npm start --reset-cache
For me it was due to react-native version in dependency section of package.json file. It was:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}
I chaged it to:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}
Now it works fine.
In my case installing a new virtual device helped. Now I am using 1 device per app.
It happens sometimes when you try to run without closing the node server, in which the previous app was running, so try restarting React.To do so, just run the following commands:
1. To kill current processes
killall node -9
2. To Start React Native
react-native start
3. Then Run android
react-native run-android
For my case I'm facing it on iOS, and I've tried to reset and clear all cache using below command but failed too, despite many comments saying that the root cause is there is react packager running somewhere accidentally, I've restarted my mac and the problem still remained.
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache
The solution is, to delete the build folder # /ios/build, then execute react-native run-ios solved it
I have tried the solutions above but adding this to AndroidManifest.xml seems to fix it.
android:usesCleartextTraffic="true"
For others with the same problem on iOS with CocoaPods:
I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn't automatically get upgraded by using react-native-git-upgrade.
The fix is to upgrade all installed pods, by running cd ios && pod install.
Expo users - make sure your app.json sdk version and package.json expo version are (may be equal) compatible to each other.
The fix we did was to make sure the ANDROID_HOME and PATH variables were set up prior to the build.
First, run the below two commands then the build the app for the device.
export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
This is working for me :
react-native start --reset-cache
I also had this issue using Expo and iOS Simulator. What worked for me was erasing the Simulator in Hardware > Erase All Content and Settings...
I have got the same issue while building my react native app for android and I did the following which worked for me.
The "JavaScript version 0.50.1" in the error console is the react-native version in your package.json file. Make sure it is the same version as "Native version 0.50.0" in the error console.
I have Updated the react-native version to the "Native Version 0.50.0" as prompted in the error console.
Rebuild the app react-native run-android.
Possible Fix:
Delete the package-lock.json
Run: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install
If the problem persists, try to execute the project directly from the Xcode
This worked for me.
In my case (NOT using expo & Android build)
package.json
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.2"
}
And app.json
{
"sdkVersion": "27"
}
resolved the issue
I was trying to build and run a React Native app from WebStorm and ran into this problem. The simple solution for me was:
watchman watch-del-all
On macOS, if watchman is not already installed, install it using Homebrew:
brew install watchman
In my case, I changed the expo version manually. I got the same issue because I forgot to update sdkVersion in app.json and babel-preset-expo in package.json
After that run: expo r -c to clear cache and start the app.
This Answer is Published in 2020,
Fix this Error in 3 steps:
First step: I changed the value of expo in package.json file to the latest supported version, according to expo documents(visit here).
Second step: I changed the value of sdkVersion in app.json file to the same value of expo in package.json.( equal number to last step).
Third step : I changed the value of react-native in package.json file to the same value of React Native Version , according to expo documents(visit here).
now your ready to go.
use npm install to install specified version of dependencies and then npm start to run the project
I got this classing when TypeScript type definitions mismatched.
E.G react-native at 0.61.5 in dependencies and #types/react-native at 0.60.0 in devDependencies.
As soon as I updated devDependencies it worked. Didn't have to restart anything.
edit your package.json for your javascript version
"react-native": "^0.50.1",
after run
npm install
For me, who is running with a monorepo, there was a hidden react-native version inside yarn.lock. It was not present in any package.json, but was never deleted.
I removed that particular react-native version from yarn.lock, and did a
yarn install
This cleaned out alot of old stuff and made sure that things was working fine.

Github says I have a Node security vulnerability in package-lock (cryptiles) but it's not installed in package.json and I'm not using it, solutions?

Basically, I have a node project and recently github has flagged a potential security vulnerability in one of my dependencies.
It's with cryptiles being version 3.1.2 and recommends I go to version 4.1.2.
Cryptiles is in my package-lock.json but I don't currently have it installed in my package.json nor is it being used anywhere in my project.
I've never worked just with package-lock.json, I tried to change the version in there, but when I run npm install, it changes it back. Solutions?
Would upgrading Node solve it? One of my npm modules? Should I just dismiss this since it's not being used in my project? Want to make sure i'm being safe though.
Here is the two sections in my package-lock.json with cryptiles, neither that nor hawk are installed in my package.json
},
"cryptiles": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
"integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
"requires": {
"boom": "5.2.0"
},
And here:
},
"hawk": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
"integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
"requires": {
"boom": "4.3.1",
"cryptiles": "3.1.2",
"hoek": "4.2.1",
"sntp": "2.1.0"
},
Would appreciate any help and anyone who can help me understand the situation so this doesn't happen again.
npm ls {module name} will allow you to see the dependency tree. Updating the parent dependency usually fixes the transitive dependency (dependency of dependency).
This article can be helpful if you need to force a dependency version.
https://www.npmjs.com/package/npm-force-resolutions
Found moderate severity vulnerabilities
run npm audit fix to fix them, or npm audit for details
Following some suggestions above, I followed the depedencies to see which npm module I installed used it. I upgraded the module and it removed the dependency and issue

Could not find method google() for arguments [] on repository container

Environment:
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-camera": "^1.1.3",
"react-native-qrcode-scanner": "^1.0.1"
qrcodescaner Users$ react-native run-android Scanning
folders for symlinks in
/Users/Desktop/reactnativeapps/qrcodescaner/node_modules
(9ms) JS server already running. Building and installing the app on
the device (cd android && ./gradlew installDebug)...
FAILURE: Build failed with an exception.
Where: Build file '/Users/Desktop/reactnativeapps/qrcodescaner/android/build.gradle'
line: 6
What went wrong: A problem occurred evaluating root project 'qrcodescaner'.
Could not find method google() for arguments [] on repository container.
Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
downgrade react-native-camera version to 1.0.0 and check again
Go to ProjectRoot\Android\gradle\wrapper\gradle-wrapper.properties,
and change the distributionUrl value to:
"https://services.gradle.org/distributions/gradle-4.1-all.zip
I had the same problem with the react-native-sqlite-storage module. It turned out that the latest version (3.3.9) had been updated to work with the next version of gradle. That update included a reference to google().
I uninstalled it and did npm install --save --save-exact react-native-sqlite-storage#3.3.8 and it worked, google() reference gone.
As far as i could see there was no mention of the breaking change in the release notes for the 3.3.9 version. It could be this doesn't happen to most people.
Upshot: Why did they change the required gradle version? The latest React Native (v0.57) updated to the next gradle version too. I may be wrong, but it looks like you can't use a module if it requires a different gradle version from the one your project uses, urgh.

webpack.validateSchema is not a function

Webpack are throwing this error all of a sudden:
TypeError: webpack.validateSchema is not a function
Everything was working fine Friday, not working today. No new commits to master since Friday.
Pruned NPM, that didn't work, deleted NPM folder and re-installed, no dice. Checked out to previous branches which have not been rebased from Master for over a week. Still the same.
Anyone have an idea?
Looks like npm bug, since webpack-dev-server#2.1.0-beta.11 requires webpack#^2.1.0-beta.26 but npm failed to install it.
The easiest way to avoid the issue without updating too much is to change dependency in package.json to
"webpack-dev-server": "2.1.0-beta.10",
Instead of something like
"webpack-dev-server": "^2.1.0-beta.9",
"^" char before version says "compatible with". Removing it sticks to the version exactly.
Don't forget to run npm install or npm update afterwards.
I ran into this problem today at virtually the same time as you, it turns out that webpack was updated again.
Here is what I did to fix it:
First I ran npm install and npm update to see what the result was. I ran both of these commands because npm has a weird way of reporting unmet dependancies, sometimes its wrong and when you re-run the npm update or the npm install, you will realize that the unmet dependencies are no longer an issue.
After I ran these commands I noticed that the only remaining message was a warning:
npm WARN webpack-dev-server#2.1.0-beta.11 requires a peer of webpack#^2.1.0-beta.26 but none was installed.
To get rid of this I changed my package.json file to read "webpack": "2.1.0-beta.26" instead of "webpack": "2.1.0-beta.25" and ran another npm install.
After this I got another error when I tried running npm start which stated that there was a problem with my webpack config file. In my case, I went to the webpack config file for my development environment (because I am not on production yet) and I found the culprit which was an invalid parameter called 'outputPath'.
I commented out that line and now I get everything working fine.
Hope this helps, may just be a hack for now but hopefully it is a step in the right direction.
UPDATE:
Ok, so I was a bit wrong about everything 'working fine'. It turns out that some of my loaders were not working correctly; Bootstrap and some other things were not being loaded in properly, breaking my styles. So, to get it back to where I was before, I deleted my node_modules folder and ran npm install using the following in package.json:
"webpack": "2.1.0-beta.25",
"webpack-dashboard": "^0.1.8",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "2.1.0-beta.9",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.15.0",
Hopefully discussions like this one will help us figure out how to move forward properly with the new versions of webpack being released.
I got the same error as well. I locked my version of webpack-dev-server in my package.json file and that prevented the error from occurring. That doesn't fix the root problem of the bug though.
This is the version of webpack-dev-server that I'm using but I'm sure later versions work as well:
"webpack-dev-server": "2.1.0-beta.9",
it worked for me when i delete ^ and use the exact version.
From
"webpack": "2.1.0-beta.25",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.9",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.1"
to
"webpack": "2.1.0-beta.25",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "2.1.0-beta.9",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "0.14.1"
It worked for me when i did:
Uninstall following package:
npm uninstall webpack webpack-dev-server --save -dev
Install following Packages:
npm install --save -dev webpack#3.10.0
npm install --save -dev webpack-cli#2.0.10
npm install --save -dev webpack-dev-server#2.9.7
Alright, update here.
Tried what a few of you guys suggested, which unfortunately just got me deeper into a rabbit hole of errors with broken module loaders.
In the end, I updated to "webpack": "^2.1.0-beta.26", and "webpack-dev-server": "^2.1.0-beta.11". After that, found out there were breaking changes, causing the loaders to break - https://github.com/webpack/webpack/releases.
in short, in your webpack config, change loaders: [ ... ], to rules : [ ... ], and on all loader declarations, append "-loader" to the string value as this,
{ test: /node_modules\/i18n-iso-countries\/(de|es|nl|sv)\.js$/, loader: 'null-loader' },
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.ts$/, loader: ['awesome-typescript-loader']} etc.
Did it for me. Hope this helps anyone else running into the issue.
I got it working by running this command:
npm install --save-dev webpack-dev-server#beta webpack#beta
As explained in this GitHub issue, you need to update webpack to webpack 2.1.0-beta.26 or later. Since the last v2.1 release is beta.28, you should require webpack#^2.1.0-beta.28.
Note that one of the breaking changes introduced in beta.26 is that you need to specify the full name of loaders, e.g. replace loader: 'babel' with loader: 'babel-loader'.
Got the same issue when we upgraded angular/cli to 1.6.3 and when we test the ng -v we get an error towards webpack.
So we happen to uninstall webpack, do an cache clean and then installed the webpack again globally.
It resolved the issue
I got this problem because I had an older global version of webpack installed that was somehow conflicting with the project-specific webpack.
I first un-installed the global (older) webpack by running:
npm uninstall webpack -g
Then I ran my project-specific webpack. On windows webpack.cmd resides in node_modules.bin\, but if you run webpack via an npm task, npm will search the .bin folder automatically, so no need to specify that path explicitly.
The functioning npm run task in my package.json looks as follows:
"scripts": {
"webpack": "webpack -w --config ./config/dev.js --progress"
}
In any angular application
First do npm install, then do npm update.
Worked for me

npm git repository not updating versions

I have an git repo and I'm trying to set it as a dependency in my project.
Using NPM, my package.json looks like this:
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-connect": "~0.2.0",
"grunt-contrib-watch": "~0.3.1",
"custom": "git://github.com/myGitHubRepo/repo.js.git#b7d53a0cfbe496ad89bde6f22324219d098dedb3",
"grunt-contrib-copy": "~0.4.0"
}
On the first
npm install
It install everything and fetches the repository with no problem. But if I change this commit hash to let's say
"custom": "git://github.com/myGitHubRepo/repo.js.git#d6da3a0...", // a different one
It doesn't update! Can anyone point me out how could I get this behavior?
I would simply like to share this code and be able to at some point change this version and the npm would automatically update this.
Ok this is how it is done.
I was also confused.
So i have a private npm module at git#github.com:myModule/MySweetModule.git
I have just published the latest tagged version. Unfortunately i cannot figure out how that works, BUT it works off your master. SOOO your master branch can be your integration branch and you have stage branch for building up the next version. Upon version completion, just merge it into master and increment your private repo's version (so your private repo now went from 1.0.0 to 1.0.1). If you call npm install it will update your repo if the master's package.json version is greater than current working repo. It will always take the latest repo.
That seems like it sucks
I agree. So lets do it a better way! If you tags for your private repo releases you can reference them by "custom": "git+ssh://git#github.com:usr/proj.git#TAG_NAME"
So it i have a tag called 0.1.0, then i would have the url in package.json versioned like so. "custom": "git+ssh://git#github.com:usr/proj.git#0.1.0"
I believe that this is the best approach to your answer. But i am not a gitanista
WARNING
If you try to go back a version, it appears it does not work. so from version 0.2.2 to 0.2.1 it will not update your project. Make sure you do npm remove myProj then npm install if you roll back a version.
manually updating that specific package did the trick for me.
and to do that automatically i added this postinstall script to my package.json
"scripts": {
...
"postinstall": "npm update custom"
}
I encountered this question and all the answers had their own set of issues so I had to find a better means.
I have discovered a newer way to prevent this npm issue with package upgrades on install within the docs (this MAY require newer versions of npm):
Ensure you are tagging versions in your repo.
Then you can include your repo using this slightly modified URL:
git+ssh://git#<repo url>.git#semver:<tag/package version>
This behaves MUCH better and has no issues with downgrading or upgrading the version as I have seen thus far.
Manually updating the package, as suggested by #Nestoro also worked for me:
npm update
npm install <your package name>

Categories

Resources