Develop Reference

Trying to install Material UI v5 causes ' could not resolve dependency errors '

When trying to install material ui get a load of dependency resolution errors. Not quite sure what the cause is. I previously tried to install V4 and got an error, that I thought I would resolve by using V5 because this version of React isn't compatible with V4 but I have no idea about the rest of the conflicts.
npm i #mui/material #emotion/react #emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #material-ui/core#4.12.4
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.0.0" from #testing-library/react#13.3.0
npm ERR! node_modules/#testing-library/react
npm ERR! dev #testing-library/react#"^13.3.0" from the root project
npm ERR! peer react#">=16" from phosphor-react#1.4.1
npm ERR! node_modules/phosphor-react
npm ERR! dev phosphor-react#"^1.4.1" from the root project
npm ERR! 18 more (react-dom, react-dropzone, react-media, react-popper, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.12.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.12.4" from the root project
npm ERR!
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
package.json:
{
"name": "wordscramble",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0",
"jquery": "^3.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.2",
"react-media": "^1.10.0",
"react-router": "^6.3.0",
"react-scripts": "5.0.1",
"react-tinder-card": "^1.4.5",
"reactstrap": "^9.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#testing-library/react": "^13.3.0",
"fetch-mock": "^9.11.0",
"msw": "^0.44.2",
"phosphor-react": "^1.4.1",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-test-renderer": "^18.2.0"
}
}
Any help in identifying any potential conflicts would be greatly appreciated,
thanks!

1- uninstall #material-ui :
npm uninstall #material-ui/core
2 - install Mui v5 :
npm install #mui/material #mui/styled-engine-sc styled-components

Works with --legacy-peer-deps:
npm i #mui/material #emotion/react #emotion/styled --legacy-peer-deps
For more details see react v17 section on this answer https://stackoverflow.com/a/66620869/1515819

Unable to install #mui/x-data-grid in react

npm install #mui/x-data-grid
throws an error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: highradius#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! peer react#"^17.0.0 || ^18.0.0" from #mui/material#5.6.0
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.6.0" from the root project
npm ERR! peer #mui/material#"^5.2.8" from #mui/x-data-grid#5.8.0
npm ERR! node_modules/#mui/x-data-grid
npm ERR! #mui/x-data-grid#"*" from the root project
npm ERR! 4 more (#emotion/react, #emotion/styled, react-dom, #mui/system)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.2" from #mui/x-data-grid#5.8.0
npm ERR! node_modules/#mui/x-data-grid
npm ERR! #mui/x-data-grid#"*" 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\01kar\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\01kar\AppData\Local\npm-cache\_logs\2022-04-06T12_50_46_543Z-debug-0.log
What I think is that there is some version mismatch in the dependencies.
New to react so can't understand the dependencies. Please give a step by step process to resolve this error.
{
"name": "highradius",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/base": "^5.0.0-alpha.75",
"#mui/material": "^5.6.0",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is the package.json file.
I tried installing npm install #mui/material #emotion/react #emotion/styled and it was installed successfully now I am trying to install data grid but its showing me this error.

npm i #mui/x-data-grid --legacy-peer-deps
Installing using this solved the issue for me.

Based on #mui/x-data-grid's documentation, it looks like this snippet of code should fix this issue
"peerDependencies": {
"#mui/material": "^5.0.0",
"react": "^17.0.0"
},

add --legacy-peer-deps at the end of your npm command like below 👇
npm i #mui/x-data-grid --legacy-peer-deps

try npm install #mui/x-data-grid --legacy-peer-deps and it will work fine.

cannot install $ npm i mini-css-extract-plugin. What could be the problem?

This is the ERROR. I use visual studio code with gitBash.
$ npm i mini-css-extract-plugin
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: lesson-54-intro-webpack#1.0.0
npm ERR! Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^4.39.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.0.0" from mini-css-extract-plugin#2.2.0
npm ERR! node_modules/mini-css-extract-plugin
npm ERR! mini-css-extract-plugin#"*" 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\Smith\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\Smith\AppData\Local\npm-cache\_logs\2021-08-19T13_12_04_740Z-debug.log
This is my package JSON file. What could be wrong here?
How to match versions?
{
"name": "lesson-54-intro-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"axios": "^0.19.0"
}
}

See the edit below.
As the error says the webpack version not matched try either:
upgrade lesson-54-intro-webpack package
downgrade mini-css-extract-plugin
Edit: based on your package.json content
You need to upgrade your webpack version to version 5

How to fix this npm install dependency issue?

I'm trying to add npm install react-material-ui-carousel --save to my react project. However when I try to install I get this dependency tree issue.
I have alredy deleted the lock and npm modules files, followed by npm install the whole project. Still getting this same error below however.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: buckets#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.2" from the root project
npm ERR! peer #material-ui/core#"^4.9.11" from react-material-ui-carousel#2.2.1
npm ERR! node_modules/react-material-ui-carousel
npm ERR! react-material-ui-carousel#"*" from the root project
npm ERR! 1 more (#material-ui/icons)
npm ERR! 2 more (react-dom, #material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.13.1" from react-material-ui-carousel#2.2.1
npm ERR! node_modules/react-material-ui-carousel
npm ERR! react-material-ui-carousel#"*" 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/user/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2021-03-02T19_57_57_671Z-debug.log
My other dependencies:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#reduxjs/toolkit": "^1.5.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"chartist": "^0.10.1",
"react": "^17.0.1",
"react-chartist": "^0.14.4",
"react-dom": "^17.0.1",
"react-hook-form": "^6.14.2",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"web-vitals": "^0.2.4"
},
The other option I could try is --legacy-peer-deps, but I would only do that as a last result option if nothing else works.
How can I properly fix the dependency tree error to get react-material-ui-carousel to install in my project?

Add --force or --legacy-peer-deps at the end of your command.
Like such: npm install react-material-ui-carousel --save --legacy-peer-deps

"peerDependencies":{ "react": "^17.0.1"} add this in your package.json

Can't install react-transition-group

Trying to install react-transition-group but get the following error
npm install react-transition-group#1.x --save
npm ERR! peerinvalid The package react#15.6.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-bootstrap#0.31.0 wants react#^0.14.9 || >=15.3.0
npm ERR! peerinvalid Peer react-dom#15.6.1 wants react#^15.6.1
npm ERR! peerinvalid Peer react-fontawesome#1.6.1 wants react#>=0.12.0
npm ERR! peerinvalid Peer react-redux#5.0.5 wants react#^0.14.0 || ^15.0.0-0 || ^16.0.0-0
npm ERR! peerinvalid Peer react-router#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-router-dom#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-simple-currency#1.0.15 wants react#^0.14.0
npm ERR! peerinvalid Peer react-transition-group#1.2.0 wants react#^15.0.0
The current dependencies in packages.json are
"dependencies": {
"accounting": "0.4.1",
"babel-runtime": "^6.20.0",
"css-loader": "0.28.2",
"history": "4.6.1",
"immutable": "3.8.1",
"jsonapi-serializer": "3.5.3",
"numeral": "2.0.6",
"prop-types": "15.5.10",
"react": "^15.3.0",
"react-bootstrap": "0.31.0",
"react-dom": "^15.4.1",
"react-fontawesome": "1.6.1",
"react-redux": "5.0.5",
"react-router": "4.1.1",
"react-router-dom": "4.1.1",
"redux": "3.6.0",
"sprintf-js": "1.1.1",
"style-loader": "0.18.1",
"superagent": "3.5.2",
"superagent-no-cache": "0.1.1",
"zpad": "0.5.0"
},

Updated npm npm install npm -g
Cleared cache: npm cache clear
Removed node_modules rm -rf node_modules
Reinstalled node_modules, npm install.

just execute the command:
npm install react-transition-group
and it will work.