Error overriding peer dependency - npm install reactstrap - javascript

"#popperjs/core": "^2.6.0",
"#testing-/jest-dom": "^5.11.9",
"#testing-/react": "^11.2.3",
"#testing-/user-event": "^12.6.2",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"react-transition-group": "^4.4.1",
versions of dependencies I have in package.json file.
G:\Projects\React\confusion> npm install --save reactstrap
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN peer react#"" from #testing-/react#11.2.3
npm WARN node_modules/#testing-/react
npm WARN #testing-/react#"^11.2.3" from the root project
npm WARN 3 more (react-dom, the root project, reactstrap)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"0.14.x || ^15.0.0 || ^16.0.0" from react-popper#1.3.7
npm WARN node_modules/react-popper
npm WARN react-popper#"^1.3.6" from reactstrap#8.9.0
npm WARN node_modules/reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! peer react#"" from #testing-/react#11.2.3
npm ERR! node_modules/#testing-/react
npm ERR! #testing-/react#"^11.2.3" from the root project
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"" from #testing-/react#11.2.3
npm ERR! node_modules/#testing-/react
npm ERR! #testing-/react#"^11.2.3" from the root project
npm ERR! react-dom#"^17.0.1" from the root project
npm ERR! 1 more (reactstrap)
npm ERR! 2 more (the root project, reactstrap)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context#0.3.0
npm ERR! node_modules/react-popper/node_modules/create-react-context
npm ERR! create-react-context#"^0.3.0" from react-popper#1.3.7
npm ERR! node_modules/react-popper
npm ERR! node_modules/reactstrap
npm ERR! reactstrap#"" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is because of a change in npm version 7. See the breaking changes section here. You can fix it by using the flag the error tells you to use at the bottom: npm i reactstrap --legacy-peer-deps. If one of your other dependencies already has reactstrap as a peer dependency, you might not need to install it at all (you can check with npm ls reactstrap), due to the change in v7.

Try something like this in your package.json
"engines": {
"npm": ">=8.7.0"
},
"overrides": {
"react": "$react"
}
This will force react to be the version defined in your "dependencies" for all dependencies (& deps of deps).
You need "recent" npm as it was buggy in some version (I had 8.3.0 and overrides wasn't working). 8.7.0 seems ok !
See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

Delete node modules,
then npm i reactstrap --legacy-peer-deps
then npm install --force
solved it for me

To resolve REACT_SPRING installation issue try
npm install --force
then
npm audit fix --force

Related

Why ERR! ERESOLVE unable to resolve dependency tree is thrown and how to resolve it?

In my React Native application, I want to install React Native Firebase Auth module with this command:
npm install --save #react-native-firebase/auth
But I'm getting the following error:
ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: woo#0.0.1
npm ERR! Found: #react-native-firebase/app#14.12.0
npm ERR! node_modules/#react-native-firebase/app
npm ERR! #react-native-firebase/app#"^14.11.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #react-native-firebase/app#"16.5.0" from #react-native-firebase/auth#16.5.0
npm ERR! node_modules/#react-native-firebase/auth
npm ERR! #react-native-firebase/auth#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
My packaje.json file:
"react-native": "0.68.2",
"#react-native-firebase/app": "^14.11.1",
"#react-native-firebase/messaging": "^14.11.1",
Thanks in advance!
Explanation
If you install #react-native-firebase/auth in a separate folder after an npm init -y, and open its folder by looking into node_modules, you would see in its package.json this:
"peerDependencies": {
"#react-native-firebase/app": "16.5.0"
},
It means that it needs version 16.5.0 of #react-native-firebase/app in order to work, while you, in your package.json, have version 14.11.1; this is the problem.
But the thing is that #react-native-firebase/messaging version 14.11.1 needs the version 14.12.0 of #react-native-firebase/app, as it has in its package.json:
"peerDependencies": {
"#react-native-firebase/app": "14.12.0"
},
Solution
The solution is to find versions that would make all of them agree. In your specific case, one way would be first to upgrade both of them to their latest versions:
npm i --save #react-native-firebase/messaging#latest #react-native-firebase/app#latest
And then, install #react-native-firebase/auth:
npm i --save #react-native-firebase/auth

Could not resolve dependency peer Webpack5 for css-loader

Actually, I am very new with javascript, I want to install vue-audio-visual to my project. But I got weird error in my node console which I don't know what's the relation. The npm error shown like below:
code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: css-loader#6.6.0
npm ERR! Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^4.0.0 || ^5.0.0" from #soda/friendly-errors-webpack-plugin#1.8.1
npm ERR! node_modules/#soda/friendly-errors-webpack-plugin
npm ERR! #soda/friendly-errors-webpack-plugin#"^1.7.1" from #vue/cli-service#4.5.15
npm ERR! node_modules/#vue/cli-service
npm ERR! peer #vue/cli-service#"^3.0.0 || ^4.0.0-0" from #vue/cli-plugin-babel#4.5.15
npm ERR! node_modules/#vue/cli-plugin-babel
npm ERR! dev #vue/cli-plugin-babel#"~4.5.0" from the root project
npm ERR! 3 more (#vue/cli-plugin-router, #vue/cli-plugin-vuex, the root project)
npm ERR! webpack#"^4.0.0" from #vue/cli-plugin-babel#4.5.15
npm ERR! node_modules/#vue/cli-plugin-babel
npm ERR! dev #vue/cli-plugin-babel#"~4.5.0" from the root project
npm ERR! 19 more (cache-loader, thread-loader, #vue/cli-service, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.0.0" from css-loader#6.6.0
npm ERR! node_modules/css-loader
npm ERR! peer css-loader#"*" from vue-loader#15.10.0
npm ERR! node_modules/vue-loader
npm ERR! vue-loader#"^15.9.2" from #vue/cli-service#4.5.15
npm ERR! node_modules/#vue/cli-service
npm ERR! peer #vue/cli-service#"^3.0.0 || ^4.0.0-0" from #vue/cli-plugin-babel#4.5.15
npm ERR! node_modules/#vue/cli-plugin-babel
npm ERR! 3 more (#vue/cli-plugin-router, #vue/cli-plugin-vuex, the root project)
npm ERR! css-loader#"^6.6.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#5.74.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^5.0.0" from css-loader#6.6.0
npm ERR! node_modules/css-loader
npm ERR! peer css-loader#"*" from vue-loader#15.10.0
npm ERR! node_modules/vue-loader
npm ERR! vue-loader#"^15.9.2" from #vue/cli-service#4.5.15
npm ERR! node_modules/#vue/cli-service
npm ERR! peer #vue/cli-service#"^3.0.0 || ^4.0.0-0" from #vue/cli-plugin-babel#4.5.15
npm ERR! node_modules/#vue/cli-plugin-babel
npm ERR! 3 more (#vue/cli-plugin-router, #vue/cli-plugin-vuex, the root project)
npm ERR! css-loader#"^6.6.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/julapps/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/julapps/.npm/_logs/2022-10-23T12_42_49_511Z-debug-0.log
However, in my package.json file i use these dependencies
css-loader": "^6.6.0"
and vue dep:
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "^4.5.15",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"webpack": "^4.46.0"
}
Can somebody explain to me what should I do?
You're using Vue3 with Webpack rather than Vite?
Not sure if it's a known choice but I rather recommend Vite.
As of why this issue, the error explains it well. Let me translate:
To install css-loader (or anything depending on it), I need at least Webpack 5
If you go check the changelog of the given package, you can see that Webpack 5 is indeed a mandatory upgrade
minimum supported webpack version is 5, we recommend to update to the latest version for better performance
Feel free to:
use Vite rather
install Webpack 5 with npm
work with yarn/pnpm, to get better errors

I can't install " npm install semantic-ui-react semantic-ui-css", what should I do?

C:\reactcamp\camp-project> npm install semantic-ui-react semantic-ui-css
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: camp-project#0.1.0
npm ERR! Found: react#18.1.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from semantic-ui-react#2.1.2
npm ERR! node_modules/semantic-ui-react
npm ERR! semantic-ui-react#"^2.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\zekis\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zekis\AppData\Local\npm-cache\_logs\2022-05-01T18_07_14_536Z-debug-0.log
TLDR:
semantic-ui-react#2.1.2 is incompatible with React 18. As a workaround, you can downgrade your application to React 17.
While resolving: camp-project#0.1.0
npm ERR! Found: react#18.1.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
Those first three lines indicate that npm identified React 18 as your project's dependency.
Could not resolve dependency
npm ERR! peer react#"^16.8.0 || ^17.0.0" from semantic-ui-react#2.1.2
npm ERR! node_modules/semantic-ui-react
npm ERR! semantic-ui-react#"^2.1.2" from the root project
These 3 lines list semantic-ui-react's peer dependency, meaning it expects your project to have either React 16.8 or React 17 as dependency.
Fix the upstream dependency conflict
There are two ways to address this conflict:
Downgrade your project to React 17 using npm install react#17
Override semantic-ui-react's using yarn's Selective Resolution feature. Inside your package.json:
"resolutions": {
"semantic-ui-react/react": "^18.0.0"
}
You can use this article it helped me solved the same problem when i wanted to install semantic-ui with react 18 it will probably help you with other frameworks that doesn't compatible with react 18

could not install sass-loader using npm

when I using this command to install sass-loader in my project:
npm install sass-loader#12.4.0
show error like this:
➜ crx-selection-translate git:(6.x-master) ✗ npm install sass-loader#12.4.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: webpack#1.15.0
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^1.13.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.0.0" from sass-loader#12.4.0
npm ERR! node_modules/sass-loader
npm ERR! sass-loader#"12.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/xiaoqiangjiang/.npm/eresolve-report.txt for a full report.
why did this happen? what should I do to fix this problem? is it possible to auto resolve and fix the dependencies? I really did not know which version should I use, and I still did not know the dependencies matrix, is it possible to let the npm to find the most suitable dependencies and auto install and fix?
I found a solution on dev.to
This worked for me
npm install -D sass-loader#^10 sass

Regarding Reactstrap installation

when I'm trying to install react strap using this command but not able to install the reactstrap.
npm install reactstrap --save
that time i'm getting this error
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN peer react#"*" from #testing-library/react#11.2.2
npm WARN node_modules/#testing-library/react
npm WARN #testing-library/react#"^11.2.2" from the root project
npm WARN 4 more (react-dom, react-popper, the root project, reactstrap)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"0.14.x || ^15.0.0 || ^16.0.0" from react-popper#1.3.7
npm WARN node_modules/reactstrap/node_modules/react-popper
npm WARN react-popper#"^1.3.6" from reactstrap#8.8.0
npm WARN node_modules/reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! peer react#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! react-dom#"^17.0.1" from the root project
npm ERR! 1 more (reactstrap)
npm ERR! 3 more (react-popper, the root project, reactstrap)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context#0.3.0
npm ERR! node_modules/reactstrap/node_modules/create-react-context
npm ERR! create-react-context#"^0.3.0" from react-popper#1.3.7
npm ERR! node_modules/reactstrap/node_modules/react-popper
npm ERR! react-popper#"^1.3.6" from reactstrap#8.8.0
npm ERR! node_modules/reactstrap
npm ERR! reactstrap#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\prajjkum\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\prajjkum\AppData\Local\npm-cache\_logs\2020-12-26T11_13_07_327Z-debug.log
So how to resolve this error please help me... I have tried to uninstall and then again install but it it not working anymore so i'm posted it here
The problem here definitely seems to be with npm 7.
Unfortunately, I am not getting the error with your setup, but only the warnings and I don't know why.
If the issue is indeed with npm, I can suggest two things :
npm install --save reactstrap --legacy-peer-deps and
npx -p npm#6 npm install.
Before proceeding with any step, ensure that you delete node_modules and package-lock.json

Categories

Resources