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

Error "sh: node-gyp-build: command not found"

npm install is failing with the below message. I tried deleting the node_modules folder and installing it again, but it didn't work:
15104 error command sh -c node-gyp-build
15105 error sh: node-gyp-build: command not found
How can I solve this?
Error log of npm install --verbose:
npm ERR! code 127
npm ERR! path /Users/johnnycheng/Documents/React Projects/blockchain:fintech/coin-web-test2/node_modules/utf-8-validate
npm ERR! command failed
npm ERR! command sh -c node-gyp-build
npm ERR! sh: node-gyp-build: command not found
npm verb exit 127
npm timing npm Completed in 30755ms
npm verb unfinished npm timer reify 1650620386080
npm verb unfinished npm timer reify:build 1650620407577
npm verb unfinished npm timer build 1650620407582
npm verb unfinished npm timer build:deps 1650620407583
npm verb unfinished npm timer build:run:install 1650620407669
npm verb unfinished npm timer build:run:install:node_modules/bufferutil 1650620407670
npm verb unfinished npm timer build:run:install:node_modules/utf-8-validate 1650620407692
npm verb code 127
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/johnnycheng/.npm/_logs/2022-04-22T09_39_45_773Z-debug-0.log
File package.json of my project:
{
"name": "coin-web-test2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#fontsource/roboto": "^4.5.5",
"#mui/material": "^5.6.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"crypto-js": "^3.1.9-1",
"ethers": "^5.6.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.1.0",
"web3": "^1.7.3"
},
"scripts": {
"start": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js 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"
]
}
}
Check the full error log here: Full error log
Environment: macOS v12.3.1 (Monterey)
Node.js version: 16.14.2
npm version: 8.7.0

Running yarn install and then npm install somehow works.
I don't any idea how.

Try installing using this command as follows:
npm install node-gyp

I can't find node-gyp module in your package.json file.
Try running npm install node-gyp and following the instructions for node-gyp module npm link.

Error installing Redux Thunk in React Native

**The proble is in react navigation/stack and /native I guess**
I am getting an error trying to install the redux thunk package in my expo app. I have tried deleting and reinstalling my node_modules folder as well as installing it with admin permissions and I am still receiving the same error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: fyp#1.0.0
npm ERR! Found: react-native-screens#1.0.0-alpha.22
npm ERR! node_modules/react-native-screens
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.0.1" from react-navigation#3.0.0
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.0.0" from the root project
npm ERR! peer react-native-screens#"^1.0.0 || ^1.0.0-alpha" from react-navigation-tabs#1.2.0
npm ERR! node_modules/react-navigation-tabs
npm ERR! react-navigation-tabs#"^1.0.0" from react-navigation#3.0.0
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.0.0" from the root project
npm ERR! 1 more (react-navigation-stack)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! #react-navigation/stack#"^6.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-native-screens#3.13.1
npm ERR! node_modules/react-native-screens
npm ERR! peer react-native-screens#">= 3.0.0" from #react-navigation/stack#6.2.1
npm ERR! node_modules/#react-navigation/stack
npm ERR! #react-navigation/stack#"^6.2.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.
npm ERR!
I am quite new to react - native, so I am not sure if the problem is regarding react - navigation /native and /stack or if it is something else
This is the list of my dependencies:
{
"name": "fyp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/core": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"expo": "~44.0.0",
"expo-app-loading": "^1.3.0",
"expo-font": "^10.0.5",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-reanimated": "~2.3.1",
"react-native-web": "0.17.1",
"react-navigation": "^3.0.0",
"react-navigation-header-buttons": "^8.0.0",
"react-redux": "^7.2.8",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

npm install firebase always fails

when I tried to install firebase it always fails. I wanna to install firebase in my REACTJS project using
`npm i firebase`
and shows this error:
npm WARN tsutils#3.17.1 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src'
npm ERR! },
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'G:\react\netflix\netflix-clone\node_modules\youtube-player\node_modules\debug\src',
npm ERR! parent: 'youtube-player'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ADMIN\AppData\Roaming\npm-cache_logs\2020-09-20T07_03_09_714Z-debug.log
my package.json file is here :
{
"name": "netflix-clone",
"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",
"axios": "^0.20.0",
"movie-trailer": "^2.0.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-youtube": "^7.12.0"
},
"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"
]
}
}

This might be a permission issue.
What you can do is that open command line(CMD) as an administrator by right clicking on command line(CMD) and selecting "Run as Administrator".
Once it is opened then navigate to your project folder and then install firebase. Image is added for windows but if you have MAC then do it correspondingly!

React npm run build is getting failed every time

when I am trying to build my react app. npm run build command is failed every time. When I use npm start command everything works fine,but I can not build the app with the command.
here is my error:
PS G:\self learning\react js\resort-reactjs> npm run build
> resort#0.1.0 build G:\self learning\react js\resort-reactjs
> react-scripts build
Creating an optimized production build...
Failed to compile.
static/js/main.b4300d14.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/contentful/dist/contentful.node.js:3909,0]
npm ERR! Windows_NT 10.0.18362
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\USER\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v12.18.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! resort#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the resort#0.1.0 build script 'react-scripts build'.
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 resort package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs resort
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls resort
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! G:\self learning\react js\resort-reactjs\npm-debug.log
in my package.json file everything is updated. my package.json file here. :
{
"name": "resort",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "0.9.5",
"styled-components": "^5.1.1"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

The package.json file looks fine to me. I think it is a bug, or, at least, a poorly documented error. Try debug or just cleanup unwanted files that you dont need around the project and restart the build.