---------ISSUE RESOLVED - SOLUTION AT THE END OF QUESTION--------
I was trying to install Material UI Icons in my Netflix-Clone React.js project with npm, but I got the following error -
PS D:\REACT Projects\netflix> npm i #mui/icons-material #mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netflix#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#">=16.8.0" from #emotion/react#11.8.2
npm ERR! node_modules/#emotion/react
npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! 1 more (#emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.5.1" 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.
Below is my package.json file -
{
"name": "netflix",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^14.0.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"sass": "^1.49.10",
"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"
]
}
}
I saw a stackoverflow post with similar issue, and tried implementing the solutions mentioned there, but was unsuccessful.
At first, I retried this command with --force -
npm i #mui/icons-material #mui/material --force
This allowed me to install the MUI Icons package without any error, however, I faced numerous errors when I tried to use the icons in my project.
Next, I changed the react and react-dom versions to 16.8.0 in the package.json file, and hit npm install. However, this time also I got the following error -
PS D:\REACT Projects\netflix> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netflix#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.0" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.8.2
npm ERR! node_modules/#emotion/react
npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! 1 more (#emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.5.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
I honestly don't know what to do now. I thought there would be a better solution available on the internet, but everywhere I see the same answers, either to use --force/--legacy-peer-deps or to downgrade my react/react-dom version. As explained above, none of these options are working.
Is there any better solution to this? I'm honestly surprised that such a well-known package would have this many problems while installing.
EDIT - Issue Resolved
Thanks to #ckesplin's help, it finally worked. I followed the below steps -
Executed npx create-react-app netflix.
Changed react and react-dom version to 17.0.0 from 18.0.0.
Deleted package-lock.json file and node_modules folder.
Then hit npm install.
Executed npm i #mui/icons-material #mui/material... it installed successfully.
However, while using an icon, I again got a bunch of errors for Module not found: Can't resolve #emotion/styled. So I had to npm i #emotion/react #emotion/styled
It appears by the log that #mui/material#5.5.3 requires react#"^17.0.0". (You attempted both react 18.0.0 and 16.14.0, but not ^17.0.0)
Replace the following inside of your package.json and give it the ol' npm install
"dependencies": {
...
"react": "^17.0.0",
"react-dom": "^17.0.0",
...
},
This has happened with me too you can install it using --force at the last of the command.
npm i material-ui --force
try the command with --force.
npm i #mui/icons-material #mui/material --force. this worked for me.
I am working on a laravel project with reactjs.
When I installed react-addons-css-transition-group the following message was displayed:
+ react-addons-css-transition-group#15.6.0
added 5 packages and removed 1124 packages in 68.535s
After that laravel-mix and npm watch do not work.
The following message is displayed when npm watch is executed:
'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch" "--scripts-prepend-node-path=auto"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! # 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`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\wamp64\www\test\npm-debug.log
I am getting error while setting environment for my react app.
I have not done any thing as per coding prospective .
Its just a hello world programme in react.
I have also uploaded my node modules in the below given url .
I have put down my code in Github : https://github.com/Arpan1089/reactapp
error :
reactapp#1.0.0 start C:\Users\Sumeet\Desktop\reactapp
webpack-dev-server
Configuration file found but no entry configured.
Use --help to display the CLI options.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! reactapp#1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the reactapp#1.0.0 start script 'webpack-dev-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the reactapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs reactapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls reactapp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Sumeet\Desktop\reactapp\npm-debug.log
Add this in your package.json inside scripts tag
"scripts": {
"start": "webpack-dev-server --hot"
},
and install webpack-dev-server --hot and webpack-dev-server using
npm install webpack-dev-server
And may be you have another process running on the same port (8080) on localhost which will prevent your app to run.
I am following the tutorial on React and Redux on thenewboston Youtube channel, and just can't install dependencies when I navigate to the directory where the files are provided. Here's the link, and I am following exactly the tips from the beginning of the video https://www.youtube.com/watch?v=TSAw5f8mOQs&list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a&index=3
This is the error I get:
:~$ npm install
npm ERR! install Couldn't read dependencies
npm ERR! Error: ENOENT, open '/home/joe/package.json'
npm ERR! If you need help, you may report this log at:
npm ERR! <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR! <npm-#googlegroups.com>
npm ERR! System Linux 3.19.0-56-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/joe
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.10
npm ERR! path /home/joe/package.json
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/joe/npm-debug.log
npm ERR! not ok code 0
You are missing package.json.
There are two possibilities:
You want to create new package.json
If you want to create a new package.json use npm init command to setup your package.json.
You already have some code with a package.json
If you already got some code from some repo, cd to that directory where you have your package.json and do a npm install or npm i
Im new to react-native. I want to draw a chart , for that I came across this library. But unfortunately while installing the library from npm
npm install react-native-svg --save I'm getting error.
npm WARN peerDependencies The peer dependency react-native#^0.24.0 included from react-native-svg will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-native-svg" "--save"
npm ERR! node v4.3.1
npm ERR! npm v2.14.12
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package react-native#0.25.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-native-svg#1.2.6 wants react-native#^0.24.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/subodh/ReactNative/SVGDemo/npm-debug.log
Anybody out there can help regarding this ?
Package.json contents :
{
"name": "SVGDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.25.1"
}
}