Context
I joined a new project where I was asked to upgrade React from version 17 to 18. After upgrading react and react-dom and some other dependencies I got some warnings, which had to do with dependencies.
npm install react#latest react-dom#latest
Some of them I was able to resolve easily, by updating some packages. This was until I tried resolving the following warning:
npm WARN Conflicting peer dependency: react#17.0.2
npm WARN node_modules/react
npm WARN peer react#"^16.3.0 || ^17.0.0" from react-side-effect#2.1.1
npm WARN node_modules/react-helmet/node_modules/react-side-effect
npm WARN react-side-effect#"^2.1.0" from react-helmet#6.1.0
npm WARN node_modules/react-helmet
Already I am a bit surprised by the react#17.0.2. Apparently there is another version of React still in dependencies, that is required by another package.
Package that requires React 17.0.2
"<CUSTOM PACKAGE MADE BY SOMEONE ELSE>": {
"version": "0.3.0",
"resolved": <LINK>,
"integrity": "sha1-Ah72HLxApcdcSPGRIE/L7wjy8Ec=",
"dependencies": {
<CUSTOM PACKAGE MADE THE SAME PERSON 2>: "^0.1.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
}
},
The actual dependency
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
Ancillary Question
Would having 2 versions of React in your package-lock.json not cause problems? I can't imagine these two version be used simultaneously. My guess would be that in this case this should be a peer dependency, am I correct to assume that?
Attempts
At first I thought that I could not update React yet, until react-helmet would be patched. I let my colleagues know, and they all said that another project also used react-helmet and they were able to update React. What?! Great impression on new colleagues 😄.
Indeed opening the other project and installing the new React version there did not cause the same warning.
Question
As an experiment I decided to remove the package-lock.json entirely. This resulted in the same errors. Removing the package-lock.json and the node_modules resolved it however! Why is this the case? The package that requires React 17.0.2 is still there as is the dependency for React version 17.0.2. Yet somehow, it is no longer a problem.
Any help to understand why this would resolve the situation would be greatly appreciated.
Note
react-helmet seems to be unmaintained, so will need to be removed eventually. This is not what my question is about.
Apparently removing the node_modules and package-lock.json did not help at all. Removing both does not trigger the warning the first install. Once you run npm install again, the same warning will show.
So it seems the warnings do not show up at the first 'clean' install. This also seems to be true at the other project, however there is something more going on there.
In this case it will probably mean that we will need to replace react-helmet with react-helmet-async and update the version of the custom package.
I've been following along with a web dev tutorial and I'm stuck at this part: https://btholt.github.io/intro-to-web-dev-v2/libraries#building-your-code
I've been trying for a couple of days to install parcel-bundler and can't figure out what I'm doing wrong. I also tried Prettier and get the same errors. I'm so frustrated and running out of ideas.
I'm running npm 6.14.4 and node 12.16.2.
This is the error npm install -g parcel-bundler in Users/myName (Catalina 10.15):
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/Users/myName/.node_modules_global/bin/parcel -> /Users/myName/.node_modules_global/lib/node_modules/parcel-bundler/bin/cli.js
> parcel-bundler#1.12.4 postinstall /Users/myName/.node_modules_global/lib/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"
Love Parcel? You can now donate to our open collective:
> https://opencollective.com/parcel/donate
+ parcel-bundler#1.12.4
updated 1 package in 18.055s
And if I try to run parcel --help I'm told: -bash: parcel: command not found
So I try to fix that first warning. I list the links to the SO articles that I tried at the bottom. I tried deleting node_modules in home directory and doing npm install again. I tried npm install --save core-js#^3. I tried doing a forced clean cache and reinstalling. I tried npm update.
This is my package.json:
{
"name": "generic_package", <-- manually changed from myName
"version": "1.0.0",
"description": "Test description", <-- manually added to remove "no description" error
"main": ".mongorc.js",
"dependencies": {
"core-js": "^3.6.5", <-- looks like it's using >3v
"lodash": "^4.17.15",
"parcel-bundler": "^1.12.4", <-- looks like it's there??
"prettier": "^2.0.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node build/build.js" <-- manually added as per an SO article
},
"keywords": [],
"author": "",
"license": "ISC",
"repository": { <-- manually added this object as per an SO article
"type": "git",
"url": "https://github.com/npm/npm.git",
"private": true <-- manually added as per another SO article
}
}
Error: Please, upgrade your dependencies to the actual version of core-js#3
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues
npm WARN deprecated core-js#2.6.11
How to update core-js to core-js#3 dependency?
Problems installing express using npm.
The reason for the message npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained is because parcel-bundler has a transitive dependency on core-js#2.6.11, which is no longer supported.
It appears that parcel was installed correctly, so you should be able to run it. On Linux systems, it would have created a symlink under /usr/local/bin/parcel. Make sure that "/usr/local/bin" is in your PATH.
You can also run it as follows:
npm run-script parcel
On newer versions of NPM, you can run this:
npx parcel
What is the best way to deal with solving a peer dependency issue in React Native when using Expo? I am stuck with a peer dependency error. I didn’t install any new packages to cause a new peer dependency, what happened is I got a node modules error (as does happen in RN sometimes) and I had to blow away and reinstall all my node modules.
I think that something got out of sync when this I re-instantiated my node modules. Any ideas on how to get around it? I have tried making my package.json specifically versioned but I haven’t found the right setup. FWIT Expo is throwing me this warning:
“Warning: ‘firebase’ peer depencency missing”
When I run
npm install OR npm ls
I get the following messages:
FWIT: my package.json looks like this
{
"name": "RN-expo",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "main.js",
"dependencies": {
"expo": "17.0.0",
"firebase": "4.1.2",
"geofire": "^4.1.2",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "16.0.0-alpha.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",
"react-native-gifted-chat": "^0.1.4",
"react-native-modal-dropdown": "^0.4.4",
"react-native-multislider": "0.0.14",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"devDependencies": {
"standard": "^10.0.2"
}
}
These errors are not occurring on anyone else's computers on my team, so I think it has something to do with the node dependencies on my computer. I have completely uninstalled all node / npm related material on my computer and attempted to reinstall it to see if it solved the issue.
While scrolling through the npm ls I see the the "UNMET PEER DEPENDENCIES" are:
UNMET PEER DEPENDENCY firebase#4.1.2
UNMET PEER DEPENDENCY react#>=15.3.1
Any suggestions on how to go about solving this?
From what I can see in your package.json, I'd expect your teammates also to encounter the same warnings.
The warning between geofire and firebase is because you're using firebase#4.1.2 but geofire wants firebase 3.x. Often (but also often not) libraries like geofire will work with newer versions of their peer dependencies, so I recommend asking the authors of geofire if it'd work with firebase#4.x.
The other warnings between React Native packages and React are spurious. For example, react-native-maps says it accepts react >= 15.4.0 and you're using react#16.0.0-alpha.6, which is clearly greater than 15.4.0. This has been addressed by Yarn, which detects that react#16.0.0-alpha.6 satisfies the requirement of react >= 15.4.0.
All this is to say that I'd expect you to see the warnings that you're seeing, and that the firebase one is legitimate and you can ignore the react one.
When I run npm run dev on a Laravel Spark v4.0.9 app, I get the following error:
Module build failed: Error:
Vue packages version mismatch:
- vue#2.0.8
- vue-template-compiler#2.2.6
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
My package.json looks like this:
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"axios": "^0.15.2",
"bootstrap": "^3.0.0",
"cross-env": "^3.2.3",
"jquery": "^2.1.4",
"js-cookie": "^2.1.0",
"laravel-mix": "0.*",
"moment": "^2.10.6",
"promise": "^7.1.1",
"sweetalert": "^1.1.3",
"underscore": "^1.8.3",
"urijs": "^1.17.0",
"vue": "~2.0.1",
"vue-resource": "^1.2.0",
"vue-router": "^2.2.1",
"vue-truncate-filter": "^1.1.6",
"vuejs-datepicker": "^0.6.2"
},
"devDependencies": {
"browser-sync": "^2.18.8",
"browser-sync-webpack-plugin": "^1.1.4"
}
}
I have tried the following (at different times, not in order):
deleted node_modules and npm install
tried just running yarn and yarn upgrade
removing vue-loader and reinstalling
specifying exact versions of vue and vue-template-compiler rather than leaving it up to npm to install or yarn to figure out dependencies
removing other non-essential packages (vue-router, vue-truncate-filter, vuejs-datepicker) and trying all of the above again
banging my head against a wall
This worked for me:
Modify package.json:
“vue”: “^2.0.8",
“vue-template-compiler”: “^2.1.8"
Delete node_modules
Run npm install
For vue ^2.5.17.
In your package.json
Simply Add this in devDependencies or update the version of vue-template-compiler:
"vue-template-compiler": "^2.5.17"
You wil have this output:
"devDependencies": {
...
"lodash": "^4.17.4",
"popper.js": "^1.14.4",
"vue": "^2.5.17", // <= note the version
"vue-template-compiler": "^2.5.17" // <= note the version
},
After that, run:
npm install
Npm will update only the updated packages.
Don't need to remove all node_modules folder. Just update packages: vue, vue-template-compiler and vue-server-renderer by #latest flag and it should help for any cases with dismatched versions of vue packages.
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
--save will automatically update version in your package.json file. #latest means install latest available version of package. If you need to update vue do it by the same way like we do it in above example.
Also, you always can check new versions for updates by command: npm outdated. It shows you all list of packages, that should be updated.
By the way, npm update command update only minor and patches versions, but it unusles when you want to update major version. For example npm update will not update 2.4.5 => 3.0.1, but can update
Running the following command helped me
npm install vue-template-compiler#2.5.16 --save-dev
NB. Replace the version number with the right version that you need. In my case the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.
Hope this helps someone
Vue packages version mismatch error fix
This steps helped me:
rm package-lock.json, rm -rf node_modules, npm update, npm install
Check dependency for vue and replace with exact in dev dependency for vue-template-compiler.
For eg.
"dependencies": {
"vue": "^2.5.2",
},
"devDependencies": {
"vue-template-compiler": "^2.5.3",
},
Should be replaced with:
"dependencies": {
"vue": "2.5.2",
},
"devDependencies": {
"vue-template-compiler": "2.5.2",
},
And run the npm install again.
Updating Vue was the solution for me.
npm i vue#latest --save
Want to mention that previously I do the steps described in Kamil' Ocean answer:
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
Once updated Vue it worked.
I run the following command:
yarn global upgrade
That will upgrade any relation that need some upgrading
Here, vue template compiler compiles the vue template. If you use vue one version and vue-template-compiler another version, that's a problem.
Run this command
npm update vue-template-compiler
This will fix the issue and it will install a vue template compiler same version like vue js version.
This worked for me and your 100%:
Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I just had to make these two versions match ( by changing the compiler value match the "vue" value in the package.json and run npm install:
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
npm install
No deleting or anything else in this case.
From the accepted answer, instead of deleting node_modules folder and run again yarn install, you can simply upgrade those 2 packages directly:
yarn upgrade vue#^2.0.8
yarn upgrade vue-template-compiler#^2.1.8
Try this : npm install vue-template-compiler#2.0.8 --save-dev
Converting the vue-template-compiler version to same as vue version (for this case 2.0.8) worked for me. Give it a try.
This worked for me:
Modify package.json:
"vue": "^2.5.2" to "vue": "2.5.*"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I used npm install vue --save and that worked for me
As seen in the error message:
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
I was using a higher vue-loader so I ran the command
npm update vue-template-compiler
and that worked like charm
NPM have special command to handle such a situation
try this:
npm install --legacy-peer-deps
Each one of us will have won the solution. So you need to see your vue version from your Error Message. For me, my Error was :
vue#2.6.14
vue-template-compiler#2.7.14
Ok from the Error Message, I find that the vue version is 2.6.14, So we need to update vue-template-compiler to that version, using:
npm install vue-template-compiler#2.6.14 --save-dev
You can do it like this:
reinstalling the vue version and the compiler with the same version by example
npm i vue#2.6.14
npm i vue-template-compiler#2.6.14
or you can do :
change it in the package.json
"dependencies": {
"vue": "^2.6.14",
},
"devDependencies": {
"vue-template-compiler": "^2.6.14",
},
or you can do : npm update vue-template-compiler if you are using the latest version of vue,
delete the module file and do npm install
You don't need to delete node_modules folder.
- vue#2.0.8
- vue-template-compiler#2.2.6
Update the package with a lower version number. In this case, npm update vue.
Optionally, you may want to npm update vue-loader too
Doing a clean install helped using the following command:
npm ci
More detailed documentation about this command can be found here.
this command save me.
npm install vue-template-compiler#2.5.16 --save-dev
maybe you can just run this to change the vue-loader
npm install vue-loader#latest --force
it works with me
Need to use the same vue-template-compiler as the version of vue been installed.
So I
npm uninstall vue-template-compiler --save-dev
and reinstall with
npm install vue-template-compiler#2.6.14 --save-dev
as the version of vue installed in my package-lock.json is 2.6.14.
Vue packages version mismatch:
vue#2.0.8
vue-template-compiler#2.2.6
Since the version of the Vue-template-compiler is new than that of the Vue
try to match the version
// Following vue#2.0.8 version
npm i vue-template-compiler#2.0.8
or
// Following vue-template-compiler#2.2.6 version
npm i vue#2.2.6
[SOLVED!!]
I went to the very same package.json file of the vue-template-compiler that is complaining, changed the version of the package in there and run yarn, like so:
_~/.config/yarn/global/node_modules/vue-jscodeshift-adapter/node_modules/vue-template-compiler/package.json_:
OLD:
"name": "vue-template-compiler",
"version": "2.6.11"
NEW:
"name": "vue-template-compiler",
"version": "2.6.10"
Run:
yarn
Source: https://github.com/vuejs/vue/issues/10932
Note: path to package.json and versions are specific for my case.
I think I'm confused as to how npm manages dependencies. I see this:
npm list react-native
project#0.0.1 /Users/me/workspace/project
└── UNMET PEER DEPENDENCY react-native#0.15.0
npm ERR! peer dep missing: react-native#^0.13.2, required by react-native-dialogs#0.0.5
npm ERR! code 1
So I try... but I get:
npm install react-native#0.15.0
....
project#0.0.1 /Users/me/workspace/project
└─┬ UNMET PEER DEPENDENCY react-native#0.15.0
└── react-tools#0.14.0-beta1 (git+https://github.com/facebook/react.git#b4e74e38e43ac53af8acd62c78c9213be0194245)
npm WARN EPEERINVALID react-native-dialogs#0.0.5 requires a peer of react-native#^0.13.2 but none was installed.
npm ERR! code 1
My package.json:
{
"name": "project",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start"
},
"dependencies": {
"apsl-react-native-button": "^2.1.0",
"base-64": "^0.1.0",
"es6-react-mixins": "^0.2.1",
"fifo": "^2.3.0",
"money-math": "^2.2.0",
"react-native": "^0.15.0",
"react-native-dropdown-android": "0.0.4",
"react-native-lightbox": "^0.5.0",
"react-native-mail": "^0.2.4",
"react-native-router-flux": "^0.3.4",
"react-native-simpledialog-android": "^1.0.2",
"react-native-swiper": "^1.3.0",
"superagent": "^1.4.0",
"tcomb-form-native": "^0.3.0",
"utf8": "^2.1.1",
"react-native-facebook-login": "^1.0.0"
}
}
I know it's an old question, but a response can still be useful for others seeing this in the future.
Explanation of the issue
In your package.json, you are installing the dependency react-native-dialogs#0.0.5 which is as well expecting as a peerDependency the module: react-native#^0.13.2. Since that project is public, it can be verified in their package.json file:
"peerDependencies": {
"react-native": "^0.13.2"
}
The first part of this statement, is the module name, and the second part, the supported version range.
This means that the root module should provide such dependency and in such version range, in order for the installation to succeed with no errors. In this case, it's stating react-native dependency, and in the ^0.13.2 version range.
Now, in your package.json, you are listing the dependency:
"react-native": "^0.15.0",
So why is it not working? The ^ (caret) in version range should include all patch and minor versions in the same major, right? (ie. in "^X.Y.Z" range, all X.*.* should work, right?). Well, turns out this isn't true for pre-1.x ranges. For 0.x ranges, the ^ caret only covers patch versions inside the range (source: NPM docs).
Therefore, per this rule, "^0.15.0" is not in the range of "^0.13.2", so this is why you get the UNMET PEER DEPENDENCY error.
Possible solutions
You have a few options here.
Provide the expected peer dependency
The most straightforward one, is providing the expected peer dependency in a version that is in the expected version range.
So you could use the same version range, in this case: "^0.13.2". Or specify an exact version as well, for example: "0.13.2".
Tip: you can check all versions that match the requested range for a given package, using this utility https://semver.npmjs.com/.
For this case, the only version that exists and matches the range is "0.13.2", but there could've been more (ie. "0.13.3" could've been fine as well, if it existed. But "0.14.0" or "0.12.0" won't work, as explained above)
Update your module dependency
In many cases the original module gets upgraded, and changes may include supporting different or more broad peerDependencies packages/versions.
As of today, I can see in the package.json on the project master branch, that the current module version is 1.1.1 and the peerDependencies have been removed, so upgrading your "react-native-dialogs" dependency version ^0.0.5 -> ^1.1.1 will do the job for this scenario.
But, what if this didn't happen, or if you didn't want to upgrade to the latest version?Let's explore more options.
Change the module itself that you want to depend on
In case that providing the dependency version requested as a peerDependency by a module you use conflicts with your requirements, and upgrading this dependency to a newer version that removes this constraint doesn't work for you.
The allowed range "^0.13.2" might be quite limited, ie. it won't support version 0.14.0 and onwards. The reasoning behind this, could be based on compatibilty issues, or maybe just a lack of awareness in allowing/supporting for more versions. There could happen to exist other versions that can work fine, but the original developer did not take the extra steps to include them.
So you just want to continue using this exact module as is, but allow a newer react-native version.
Imagining the original scenario, that 0.0.5 was the current latest version in the master branch, it could make sense raising this as an issue to the original module repo, and/or submit them a PR proposing a broader supported range. For example:
"peerDependencies": {
"react-native": "< 1.0.0"
}
The range "< 1.0.0" would now allow the "^0.15.2" version range.
What if you didn't want to allow all the 0.x versions? Then you could use a more narrow range, such as: "> 0.4.0 < 1.0.0". Take a look at NPM semver docs for syntax, a lot more possibilities are allowed too.
Don't use that module at all / Build your own
It can happen that the original module can be abandoned, have bugs, or just not work for your all of your requirements. In this case, you can look for a some alternative available in the community, or even build one yourself.
Since this module is public you can even fork the project and upload a new package version yourself with the changes you want (you'll have to use a different package name of course).
Try the "--save" argument for "npm install" command, like:
npm install react-native#0.15.0 --save