I am trying to install material UI as described on the home page, but I get a dependency tree error :
C:\dev\shape-shop-front-end>npm install #mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.13.1" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.7.1
npm ERR! node_modules/#emotion/react
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"*" from the root project
npm ERR!
In my package.json I have "react": "^16.13.1" .
As I understand it, this error is saying that a MUI package needs react 16.8.0
Indeed, a sub-dependency of it, named #emotion/react#11.7.1, has listed the following peer dependencies you have to meet:
"peerDependencies": {
"#babel/core": "^7.0.0",
"react": ">=16.8.0"
}
source: https://github.com/emotion-js/emotion/blob/main/packages/react/package.json
I think this has to do with how new versions of NPM deal with peer dependencies: https://github.blog/2021-02-02-npm-7-is-now-generally-available/
As your react version seems OK, I would go with this suggestion:
You have the option to retry with --force to bypass the conflict or --legacy-peer-deps command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).
Try using --force.
That's what worked for me
npm install #mui/material --force
I have a feeling it's a dependency conflict that came with the recent React upgrade...
Looks like updating dependencies in package.json is the only way to make this happen now.
$ npm install -g npm-check-updates
$ ncu -u
$ npm install
or see how to update each dependency in package.json
after updating, now try to install your material UI.
use this command instead
npm install #material-ui/core
If you're using it for the icon, then use this
npm install #material-ui/core #material-ui/icons
Try using
npm install #material-ui/core --force
Related
I'm trying to install new dependency to my service,
#nest/microservices: ^7.0.3 and got this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vb-service-ads#0.0.1
npm ERR! Found: #nestjs/common#8.4.7
npm ERR! node_modules/#nestjs/common
npm ERR! #nestjs/common#"^8.4.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #nestjs/common#"^7.0.0" from #nestjs/microservices#7.6.18
npm ERR! node_modules/#nestjs/microservices
npm ERR! #nestjs/microservices#"^7.0.3" from the root project
npm ERR!
so versions of packages with problem are:
"#nestjs/common": "^8.4.7",
"#nestjs/core": "^7.6.15"
I tried to upgrade versions of core and microservices dependencies to ^8.0.0, and got more dependencies broken and also tried to downgrade common to ^7.6.15 and got same effect.
Tried to use yarn instead of npm, it resolved my problem, but i need all packages to be installed by npm
So, I resolved this problem, with deleting node_modules, package-lock.json and removing dependencies and devDependencies in package.json
After i've installed all dependencies manually one by one
you can see the solution here, or at least this is what worked for me here. https://www.angularjswiki.com/angular/unable-to-resolve-dependency-tree-error-in-angular-while-installing-npm-packages/
I leave you the part where it worked for me
To fix Unable to resolve dependency tree error in Angular while
installing npm packages follow the below steps.
Run npm install --save --legacy-peer-deps instead of npm install command. Another way is delete the node_modules folder and
package_lock.json file and then
Run npm cache clean --force after npm i --force command.
I am trying to update react-router-dom however when I try I get an ERR of course. The error ERESOLVE unable to resolve dependency tree
npm update "popper.js" "bootstrap" "react-router-dom" :
Could not resolve dependency:
npm ERR! peer popper.js#"^1.16.1" from bootstrap#4.6.1
npm ERR! node_modules/bootstrap
npm ERR! bootstrap#"^4.1.1" from the root project
npm update popper.js :
Could not resolve dependency:
npm ERR! peer popper.js#"^1.16.1" from bootstrap#4.6.0
npm ERR! node_modules/bootstrap
npm ERR! bootstrap#"^4.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: popper.js#1.16.1
npm ERR! node_modules/popper.js
npm ERR! peer popper.js#"^1.16.1" from bootstrap#4.6.0
npm ERR! node_modules/bootstrap
npm ERR! bootstrap#"^4.1.1" from the root project
And it seems like Im stuck in this loop of not being able to update bootstrap because popper.js is behind and I can update popper.js because of bootstrap.
I am running npm update "popper.js" | "bootstrap" | "react-router-dom" independently.
But no matter what I do I get these same errors.
I am working inside a giant project with alot of dependencies that need updating so I cant just run an update on everything. Can someone explain how I can update the peer dependencies? Ive never done an update like this so any pointer in the right direction would be helpful.
The best option is to run script with flag --legacy-peer-deps it will skip checking peer dependency. Peer dependency should be installed manually in package.json.
Read more about the flag.
This question already has answers here:
create-react-app dependency version issues with React 18
(6 answers)
Closed 10 months ago.
Even --force or --legacy-peer-deps didn't work.
Transcript:
npx create-react-app my-app
Creating a new React app in /home/zahid/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1353 packages in 2m
171 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#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 /home/zahid/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/zahid/.npm/_logs/2022-04-11T22_25_02_229Z-debug-0.log
npm install --no-audit --save #testing-library/jest-dom#^5.14.1 #testing-library/react#^12.0.0 #testing-library/user-event#^13.2.1 web-vitals#^2.1.0 failed
This is going to solve the problem:
npm config set legacy-peer-deps true
Explanation:
The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.
npx create-react-app my-app
npm config set legacy-peer-deps true
Executing that helped me (on Linux).
Here is what worked for me:
Run npx create-react-app as normal and got the errors
Go into the package.json file and change the React version from 18.0.0 to 17.0.0
Delete the node_modules folder.
Then run npm install.
No more errors.
This works for me
I changed this in my package.json (I downgraded the versions):
"react": "^18.0.0",
"react-dom": "^18.0.0",
To
"react": "^17.0.0",
"react-dom": "^17.0.0",
Then, remember to remove your folder /nodes_modules and run this in your project main folder:
npm i
Try to run this first:
npm config set legacy-peer-deps true
And try your command again.
It worked with me!
Try to run this command first:
npm config set legacy-peer-deps true
and then type the command
npx create-react-app app-name
It worked for me.
Try this:
Delete folder node_modules and file package-lock.json
Go to file package.json and change both react and react-dom's version to 17.0.0
Now run npm install
Things should now work as expected.
I often receive error ERESOLVE similar to below. How do you read it?
>npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myapp#0.0.0
npm ERR! Found: #angular/compiler#12.1.0
npm ERR! node_modules/#angular/compiler
npm ERR! #angular/compiler#"12.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/compiler#"12.1.1" from #angular/compiler-cli#12.1.1
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"^12.1.0" from the root project
npm ERR! peer #angular/compiler-cli#"^12.0.0 || ^12.1.0-next" from #angular-devkit/build-angular#12.1.0
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"12.1.0" from the root project
And how do you read it - Which package depends on which? Which end of the tree I have control of? Top or bottom?
Did I add #angular-devkit/build-angular into my app and it needs but cant find angular/compiler ? or is it the other way around?
I can be wrong but this is what I read:
Which package depends on which?
Your app directly depends on:
#angular/compiler#"12.1.0"
#angular/compiler-cli#"^12.1.0"
#angular-devkit/build-angular#"12.1.0"
Your app transitively depends on:
#angular/compiler#"12.1.1" from #angular/compiler-cli#12.1.1 <- which is the actual #angular/compiler-cli version installed in your node_modules.
#angular/compiler-cli#"^12.0.0 || ^12.1.0-next" from #angular-devkit/build-angular#12.1.0 <- which is the actual #angular-devkit/build-angular version installed in your node_modules.
So what I read is that there is a conflict because your app directly depends on #angular/compiler#"12.1.0" and transitively on #angular/compiler#"12.1.1" (from #angular/compiler-cli#12.1.1)
You can probably fix this by adding what it looks like a missing caret, ie #angular/compiler#"^12.1.0".
Unrelated ^, I had a similar problem but all versions where compatible. I deleted package-lock.json and node_modules and installed them again and it worked fine.
I've fixed it with following commands:
rm package-lock.json
rm -rf node_modules
yarn install
npm i
Trying to reduce any changing variables and using a fresh pull of my code. They are no node-module packages or package-lock.json. I run npm install I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: react-native-screens#2.15.2
npm ERR! node_modules/react-native-screens
npm ERR! react-native-screens#"~2.15.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-screens#"^1.0.0 || ^1.0.0-alpha" from react-navigation-drawer#1.4.0
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"^1.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/myname/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myname/.npm/_logs/2021-05-22T01_16_02_351Z-debug.log
If I do an install via --force or npm install --legacy-peer-deps I get a bunch of files mark as outdated and when I run npm update I get the same error. I have tried clearning the cache of my npm as well with no luck npm cache clean. I don't know why this is happening as there is no node-module folder or anything installed for it to give error under my node_modules/react-native-screens...they are no node_modules folder yet. What is causing this and how can I fix it?
Edit:
I ran npm update -g , then npm audit fix and then I got an error:
code ERESOLVE
ERESOLVE unable to resolve dependency tree
While resolving: Sculp latest app#undefined
Found: react-native-screens#2.15.2
node_modules/react-native-screens
react-native-screens#“~2.15.0” from the root project
so I ran expo install react-native-screens and saw that it couldn't find expo...checked my folder and my node_module folder is missing. Like if it never was there or gotten installed.
edit:
I have tried all the methods listed below and it gives random errors that I can not fix it undefined is not an object (evaluating ‘_core.ThemeColors.light’) and I have googled this and one of the main solutions is delete npm and package-lock.json and reinstall but that brings me back to where I started.
It works for me:
npm install --save --legacy-peer-deps
Try this:
npm config set legacy-peer-deps true
Note: this will set this flag permanently
For one time:
npm install --save --legacy-peer-deps
Try to copy your src folder and package.json file and initialize another react-native (new) and replace the source the src folder and package.json file and reenter npm install.
You can use --force in the command line, but you will problably have to deal with a broken react-native dependency later. Anyway, there are other ways of dealing with this broken dependency.
Try it in the following:
npm add react-native
expo install (your needed module)