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.

Why is NPM not start and deploying properly to host 3000?

I have latest version of node and vs code installed. I can easily install node modules but it wont start and deploy to host 3000.
Here is the error.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
Starting the development server...
events.js:377
throw er; // Unhandled 'error' event
^
Error: spawn powershell ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:274:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:280:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn powershell',
path: 'powershell',
spawnargs: [
'-NoProfile',
'-NonInteractive',
'–ExecutionPolicy',
'Bypass',
'-EncodedCommand',
'UwB0AGEAcgB0ACAAIgBgACIAaAB0AHQAcAA6AC8ALwBsAG8AYwBhAGwAaABvAHMAdAA6ADMAMAAwADAAYAAiACIA'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reminder#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reminder#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
Im uncertain if my package.json is to blaim for the dom not deplying so here is that code below as well. let me know if you need anything additional as well. Again I dont know why it isnt automatically opening up to host 3000 and rendering things to the dom?
{
"name": "reminder",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "CI= react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

solved here, watch the video below and he solved it for me. not affiliated
https://www.youtube.com/watch?v=1sFH30JjB6E

npm is failing to parse package.json

I'm new to using npm and node I created a react app with truffle unbox react which uses npm init react-app. I have tried reinstalling npm and clearing the cache but I keep getting the following error when I run sudo npm start.
npm ERR! code EJSONPARSE
npm ERR! file /home/a/Documents/so/client/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token { in JSON at position 634 while parsing near '...rsion"
npm ERR! JSON.parse ]
npm ERR! JSON.parse }
npm ERR! JSON.parse }
npm ERR! JSON.parse
npm ERR! JSON.parse {
npm ERR! JSON.parse "name": "mapboxAnd...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/a/.npm/_logs/2020-06-21T17_39_45_819Z-debug.log
My package.json looks like this.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "16.11.0",
"react-dom": "16.11.0",
"react-scripts": "3.2.0",
"web3": "1.2.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
As far as I can tell package.json is nothing but json. Please help me understand this error. Thankyou.

Your package.json is a valid JSON file, the error is somewhere else.
Can you please do the below:
run the package without sudo, e.g. "npm start" instead of "sudo npm start", you shouldn't run your packages as root.
have a look at the log file "/home/a/.npm/_logs/2020-06-21T17_39_45_819Z-debug.log" and post more details.

Issue with npm start

I have an issue when using npm start (used create-react-app). Anyone that can see what's wrong?
Error notification in my terminal:
npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\charl\Desktop\IRONHACK\react-interview\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\charl\Desktop\IRONHACK\react-interview\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
{
"name": "particeep",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

try to delete package.json and write npm install

npm cache clean -f
rm -rf node_modules
npm i

I think you used npm create-react-app projectname (with npm). This should NOT be done.
You want to use npx create-react-app projectname (with npx) when creating a new project.
I made the same mistake for my first project. Instead of messing around with the terminal, the simplest option I found was just copy the files you already have, delete the folder, and create a new react folder with npx

you have to use npm start after going to the root folder of the app by entering cd your_app_name(app name which used with npx creat-react-app code in terminal)