Long story short, I currently have React 16 installed and I wanted to add React 17 to check tests, migrate, etc.
Running npm install throws an error, because react-dom#17 requires react#17 and it seems to not being able to find one.
The question is - is there a way to fix this problem without using --force or --legacy-peer-deps flags?
I created aliased packages, using react-redux as an example.
"react": "^16.8.6",
"react-17": "npm:react#^17",
"react-dom": "^16.8.6",
"react-dom-17": "npm:react-dom#^17"
Running npm install throws an error, because react-dom#17 requires react#17 and it seems to not being able to find one.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: platform-modules#0.0.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! dev react#"^16.8.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"npm:react#^17" from react-dom-17#17.0.2
npm ERR! node_modules/react-dom-17
npm ERR! dev react-dom-17#"npm:react-dom#^17" from the root project
I tried using npm overrides, as well as peerDependenciesMeta but it unfortunately didn't help.
"overrides": {
"react-dom-17": {
"react": "$react-17"
}
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
react-redux package uses this approach, but it uses Yarn instead of NPM.
Related
I'm following an e-commerce tutorial, cannot install all the packages react-paypal button in npm with react 18
npm i react-paypal-smart-button
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
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\a\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\a\AppData\Local\npm-cache\_logs\2023-02-09T15_12_52_013Z-debug-0.log
react-paypal-smart-button has peerDeps like that:
"peerDependencies": {
"prop-types": "^15.6.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
And you installed react version 18.
So just use flag npm i--legacy-peer-deps to ignore that warning. (then react-paypal-smart-button will use your react 18 instead of recommended 17. Hope that will not break the package:))
About peerDeps - https://nodejs.org/es/blog/npm/peer-dependencies/
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: learn#0.1.0
npm ERR! Found: react#18.0.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#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.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 C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.
When I used npm start it gives this error:
Compiled with problems:
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 'D:\React\Education\Fetch api\my-learn\src'
I tried with clear cache,
deleting node modules and then again installing them (npm install),
Then changed from package.json to this:
change "react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g. "react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, run npm install.
None of the solutions worked for me. How can I solve this?
From
React JS npm start shows failed to compile web-vitals
Basically run
npm i web-vitals --save-dev
on your terminal and it should work.
You will need to update #testing-library/react to the latest version to use it properly with React 18.
Run the command:
npm i #testing-library/react#13.0.1
Tested on my project where I had the same problem
I have a react app created with cra. I want to install webpack in order to setup module federation.
I am getting this error on running the below command:
$ npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netlify-foot#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"~0.9" from webpack-server#0.1.2
npm ERR! node_modules/webpack-server
npm ERR! dev webpack-server#"*" 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:\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:\AppData\Local\npm-cache\_logs\2021-06-05T15_25_05_470Z-debug.log
package.json
{
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
}
What is the issue? How to get this working?
Your install command is:
npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
This means, it tries to add the following six packages:
webpack#5.24.0
webpack-cli
webpack-server
html-webpack-plugin
babel-loader
webpack-dev-server
But webpack-server is not a thing. Remove it.
If you look closely at your error message, it kinda tries to tell you the same thing:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"~0.9" from webpack-server#0.1.2
It says that it fails to satisfy dependencies caused by this webpack-server. Make sure to get rid of it. That will at least fix this problem.
Your next problem
NOTE however, that for further customization of CRA's webpack build, given you don't want to eject, you also need a way to override it's default build settings.
For that, you might want to check out CRACO.
CRACO (like Webpack Module Federation) does not have very good documentation, but it has a few webpack-related examples here.
For a React 17 project, bootstrapped with create-react-app, I want to use the react-helmet-async package.
This project has the following peer dependencies, located in the package.json file:
"peerDependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
When trying to install the package, the following error appears:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#1.0.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.6.0" from react-helmet-async#1.0.7
npm ERR! node_modules/react-helmet-async
npm ERR! react-helmet-async#"^1.0.7" 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 /home/bas/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/bas/.npm/_logs/2021-02-11T13_55_56_813Z-debug.log
As far as I understand, the react-helmet-async package requires React ^16.6.0 for projects using this package. I can use the --force option, which removes the error, but when I try to do an npm update it keeps recurring.
I tried adding resolutions in my package.json, trying to force the package to use the React version I'm using. Before running a npm install or npm update, I ran npx npm-force-resolutions.
"resolutions": {
"react-helmet-async/react": "^17.0.1"
}
This unfortuntaly did not work. Is there any way, without downgrading to React 16, to still use this package without receiving errors in my console? Also, am I misunderstanding something about peer dependencies?
As far as the peer dependency of react#^16 I ran out of luck other then using the --force option when installing the package. However a commit in a new version of react-helmet-async fixed the problem.
I am trying to install the library #material-ui/pickers by running:
npm i #material-ui/pickers
But this error shows up:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: five#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.11.3
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from the root project
npm ERR! peer #material-ui/core#"^4.0.0" from #material-ui/pickers#3.2.10
npm ERR! node_modules/#material-ui/pickers
npm ERR! #material-ui/pickers#"*" from the root project
npm ERR! 1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.4" from #material-ui/pickers#3.2.10
npm ERR! node_modules/#material-ui/pickers
npm ERR! #material-ui/pickers#"*" 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.
Here are my package.json dependencies:
"dependencies": {
"#material-ui/core": "^4.11.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
I thought there was maybe some problems in other parts of my file, so I started a create-react-app from scratch and tried again, but the same error is still occuring.
Perhaps you want to check out the new Material UI DatePicker from over here. If I understood correctly#material-ui/pickers isn't used anymore.
#material-ui/pickers required react to be 16.13.1 or higher but not to 17.xx.xx. Right now you are using React version 17.0.1. You can try to downgrade the React to version 16 and see if it works
I even had this error and what I did was simply closed my VScode because the project was open in it and again tried to install the package and guess what it works. You can try this solution hopefully it works.