Package react does not satisfy its siblings - reactjs

Was trying to install
sudo npm install react-datagrid --save
sudo npm install react-datepicker --save
Console Output
npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-datagrid#2.0.2 wants react#>=0.14.0
npm ERR! peerinvalid Peer react-dom#15.0.1 wants react#^15.0.1
npm ERR! peerinvalid Peer input-moment#0.1.0 wants react#^0.14.0
npm ERR! peerinvalid Peer react-datepicker#0.26.0 wants react#^0.14.0
npm ERR! System Linux 3.19.0-56-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "react-datagrid" "--save"
npm ERR! cwd /home/shashank/webapps/cms
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.10
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/shashank/webapps/cms/npm-debug.log
npm ERR! not ok code 0
The required dependency is react#^15.0.1 which is already installed can be seen in package.json I do I overcome this issue.
package.json
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"chalk": "^1.1.1",
"gulp": "gulpjs/gulp#4.0",
"gulp-cli": "gulpjs/gulp-cli#4.0",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.1",
"gulp-htmlmin": "^1.3.0",
"gulp-if": "^2.0.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"pretty-hrtime": "^1.0.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"yargs": "^4.1.0"
},
"dependencies": {
"gulp-rename": "^1.2.2",
"moment": "^2.13.0",
"react": "^15.0.1",
"react-datagrid": "^2.0.2",
"react-dom": "^15.0.1"
}
}

you can update last npm that solve your problem
sudo npm install npm -g

Use
"react": "^15.0.1 || ^0.14.0"

I was able to fix the issue by installing a stable version on node I upgraded from v0.10.25 to v4.4.3
Step 1: First Remove the old version of node by finding the location of installation
$ which node ( Finds the path of installations Eg: /usr/bin/nodejs)
$ sudo rm -rf /usr/bin/nodejs
Step 2: Download Stable version of Node (I used node-v4.4.3-linux-x64.tar.gz )
Step 3: Install the stable version of Node in /usr/local/
$ sudo tar -C /usr/local/ --strip-components 1 -xzf node-v4.4.3-linux-x64.tar.gz
VoilĂ 

Related

Dependency issues upgrading to MUI version 5

I'm trying to upgrade MUI v4 to MUI v5, and I've read the docs in migrating to v5 here.
I get this error message when running npm update
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: placemaker#0.1.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from #mui/styles#5.11.7
npm ERR! node_modules/#mui/styles
npm ERR! #mui/styles#"^5.10.16" 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!
npm ERR! For a full report see:
Log files:
C:\Users\...\...\...\file.log
# npm resolution error report
While resolving: app#0.1.0
Found: react#18.2.0
node_modules/react
react#"^18.2.0" from the root project
Could not resolve dependency:
peer react#"^17.0.0" from #mui/styles#5.11.7
node_modules/#mui/styles
#mui/styles#"^5.10.16" from the root project
Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
my package.json dependencies
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/icons-material": "^5.10.16",
"#mui/material": "^5.10.16",
"#mui/styles": "^5.10.16",
"#mui/x-data-grid": "^5.17.13",
"#mui/x-date-pickers": "^5.0.9",
"#reduxjs/toolkit": "^1.9.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/multer": "^1.4.7",
"#types/node": "^16.18.3",
"#types/pg": "^8.6.5",
"#types/react": "^18.0.25",
"#types/react-dom": "^18.0.9",
"#types/react-redux": "^7.1.24",
"auth0": "^3.1.1",
"autosuggest-highlight": "^3.3.4",
"axios": "^0.27.2",
"cors": "^2.8.5",
"dayjs": "^1.11.6",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"express-oauth2-jwt-bearer": "^1.2.0",
"express-promise-router": "^4.1.1",
"helmet": "^6.0.1",
"multer": "^1.4.5-lts.1",
"nodemon": "^2.0.20",
"pg": "^8.8.0",
"pg-format": "^1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.40.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.3",
"react-select": "^5.6.1",
"socket.io": "^4.5.4",
"socket.io-client": "^4.5.4",
"typescript": "^4.9.3",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"#types/autosuggest-highlight": "^3.2.0",
"#types/cors": "^2.8.12",
"#types/dotenv": "^8.2.0",
"#types/google.maps": "^3.50.5",
"#types/helmet": "^4.0.0",
"#types/uuid": "^8.3.4",
"concurrently": "^7.6.0",
"react-scripts": "5.0.1"
},
Not sure how to fix this, it appears the log tells me that react#^17.0.0 should work and I'm running version 18.
npm auidt --production provides the following info:
# npm audit report
json5 2.0.0 - 2.2.1
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via `npm audit fix`
node_modules/json5
1 high severity vulnerability
Try to update your dependencies using npm-check-updates
https://www.npmjs.com/package/npm-check-updates
Turns out, I was not thorough in reading the MUI docs, I had to:
npm uninstall #mui/style
npm i #mui/system
replace old code that was dependent on #mui/style
This removed the version mismatch.
I tried different ways i.e npm update --force / npm audit fix --force which just made it worse by downgrading to different packages creating many more vulnerabilities.
Thanks all for the help! Will accept sancelots answer though I did not try it, it seems like a beginner friendly solution

Error when trying to install react-router-dom dependency npm on Visual Studio

I am getting an error trying to install the npm onto my create-react - app application. 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
**Here is the output from the console
**
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #nt/xps-base-app#1.5.5
npm ERR! Found: react-router-dom#5.2.0
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^5.2.0" from the root project
npm ERR! peer react-router-dom#"\>=5.1.0" from #okta/okta-react#4.1.0
npm ERR! node_modules/#okta/okta-react
npm ERR! #okta/okta-react#"^4.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-router-dom#"5.1.2" from #nt/xps-base-app#1.5.5
npm ERR! node_modules/#nt/xps-base-app
npm ERR! #nt/xps-base-app#"^1.5.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-router-dom#5.1.2
npm ERR! node_modules/react-router-dom
npm ERR! peer react-router-dom#"5.1.2" from #nt/xps-base-app#1.5.5
npm ERR! node_modules/#nt/xps-base-app
npm ERR! #nt/xps-base-app#"^1.5.4" from the root project
**list of dependencies from package.json
**
"dependencies": {
"#nt/eslint-config-xps-base": "^1.6.4",
"#nt/xps-base-app": "^1.5.4",
"#okta/okta-auth-js": "4.6.1",
"#okta/okta-react": "^4.1.0",
"#reduxjs/toolkit": "^1.6.1",
"#types/text-encoding": "^0.0.35",
"axios": "^0.21.1",
"eslint": "5.15.1",
"jest-junit": "6.4.0",
"moment": "2.24.0",
"prop-types": "15.7.2",
"react": "^17.0.1",
"react-axe": "3.3.0",
"react-cookie": "^4.0.3",
"react-dom": "^17.0.1",
"react-media": "2.0.0-rc.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-with-direction": "1.3.1",
"retry-axios": "^2.4.0",
"semantic-ui-react": "^2.0.3",
"uuid": "^3.4.0",
"react-scripts": "^4.0.1",
"semantic-ui-css": "^2.4.1",
"xps-react": "1.7.0",
"xps-style": "1.7.0"
},
"devDependencies": {
"#nt/xps-dev-utils": "^1.6.2",
"cross-env": "^7.0.3",
"react-hot-loader": "^4.13.0",
"text-encoding": "^0.7.0"
},
I don't know why we have this error a lot but a while ago someone else points out this error to me. That time we use a couple of commands. first this: npm install --legacy-peer-deps #youpackagename then we had to use this: npm install --force #yourpackagename you may not need the second command check your project before you use the second. You can go to this question for more information.

unable to resolve dependency tree Chakra UI

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: aid-frontend#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.6" from the root project
npm ERR! peer react#">=16.8.6" from #chakra-ui/checkbox#1.7.1
npm ERR! node_modules/#chakra-ui/checkbox
npm ERR! #chakra-ui/checkbox#"^1.0.0" from the root project
npm ERR! 2 more (#emotion/react, #emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#">=18" from #chakra-ui/system#2.3.0
npm ERR! node_modules/#chakra-ui/system
npm ERR! peer #chakra-ui/system#">=1.0.0" from #chakra-ui/checkbox#1.7.1
npm ERR! node_modules/#chakra-ui/checkbox
npm ERR! #chakra-ui/checkbox#"^1.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/timjini/.npm/eresolve-report.txt for a full report.
I have tried so many diffent ways to solve this issue but it still persists
My dependencies
"dependencies": {
"#chakra-ui/checkbox": "^1.0.0",
"#chakra-ui/icons": "^1.0.0",
"#chakra-ui/react": "^1.8.7",
"#emotion/react": "^11.0.0",
"#emotion/styled": "^11.0.0",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"actioncable-js": "^5.0.0-rc2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"chakra-ui": "^0.3.9",
"emoji-picker-react": "^3.5.1",
"formik": "^2.2.9",
"framer-motion": "^6.2.8",
"google-map-react": "^2.1.10",
"js-logger": "^1.6.1",
"leaflet": "^1.8.0",
"ramda": "^0.28.0",
"react": "^16.8.6",
"react-bootstrap": "^2.2.2",
"react-bootstrap-validation": "^0.1.11",
"react-dom": "^16.8.6",
"react-leaflet": "^4.0.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"react-search-box": "^2.3.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
Solve Chakra UI dependency issues
Chakra UI 2 only compatible with react 18. Your react seems outdated.
Chakra UI has simple installation. You do not need such trash dependencies. Just delete all the project and try this line which is on the official website:
npm i #chakra-ui/react #emotion/react #emotion/styled framer-motion

React Project installation always fails at inotify (ELIFECYCLE errno 1)

I'm trying to install a ReactJs Project on Ubuntu 19.04. For some reason, the installation always seems to fail at a certain package called inotify.
I'm currently on node v12.10.0 and npm v6.10.3
I've tried several things and even tried to install inotify individually, but nothing seems to have worked. I still have no clue about the reason for this issue.
This is my package.json file.
{
"name": "im-lite",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost/React-Redux/im-lite/build",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"css-loader": "^0.23.1",
"dev": "0.1.3",
"react-scripts": "^2.1.1",
"style-loader": "^0.13.1"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-register": "^6.24.1",
"bcrypt": "^1.0.2",
"body-parser": "^1.17.1",
"compression": "^1.7.1",
"constants": "0.0.2",
"cookie-parser": "^1.4.3",
"cors": "^2.8.3",
"css-loader": "^0.23.1",
"debug": "^2.6.6",
"encoding": "^0.1.12",
"express": "^4.15.2",
"express-status-monitor": "^1.1.4",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"floating-label-react": "^0.2.0",
"formidable": "^1.1.1",
"fs": "0.0.1-security",
"geoip-lite": "^1.2.1",
"http": "0.0.0",
"import-export": "^1.0.1",
"inherits": "^2.0.3",
"ipaddr.js": "^1.3.0",
"isomorphic-fetch": "^2.2.1",
"json-loader": "^0.5.7",
"loader-utils": "^1.1.0",
"mime": "^2.3.1",
"next": "^6.1.1",
"node-env-file": "^0.1.8",
"node-fetch": "^1.6.3",
"path": "^0.12.7",
"preact": "^8.2.6",
"preact-compat": "^3.17.0",
"qs": "^6.4.0",
"query-string": "^6.1.0",
"react": "^15.5.4",
"react-addons-update": "^15.5.2",
"react-adsense": "0.0.5",
"react-alice-carousel": "^1.13.11",
"react-dom": "^15.5.4",
"react-helmet": "^5.2.0",
"react-hot-loader": "^1.3.1",
"react-html-parser": "^1.0.3",
"react-lazy-load": "^3.0.13",
"react-player": "^1.11.0",
"react-redux": "^5.0.4",
"react-responsive-carousel": "^3.1.49",
"react-router": "^3.0.5",
"react-share": "^2.4.0",
"react-toolbox": "^2.0.0-beta.7",
"react-virtualized": "^9.7.5",
"redux": "^3.6.0",
"redux-infinite-scroll": "^1.0.9",
"redux-thunk": "^2.2.0",
"register": "0.0.0",
"request": "^2.81.0",
"request-ip": "^2.0.2",
"serviceworker-webpack-plugin": "^0.2.1",
"style-loader": "^0.13.2",
"sw-precache-webpack-plugin": "^0.9.1",
"uglifyjs-webpack-plugin": "^0.4.6",
"url": "^0.11.0",
"url-loader": "^1.1.2",
"url-parse": "^1.4.1",
"uuid": "^3.0.1",
"webpack": "^4.27.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
}
}
This is the stack trace when I execute sudo npm-install
npm WARN deprecated fsevents#1.2.4: Way too old
inotify#1.4.6 install /home/vaibhav/Desktop/im/mobile-im-pw/im-lite/node_modules/inotify
node-gyp rebuild
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/vaibhav/Desktop/im/mobile-im-pw/im-lite/node_modules/inotify/build'
gyp ERR! System Linux 5.0.0-29-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/vaibhav/Desktop/im/mobile-im-pw/im-lite/node_modules/inotify
gyp ERR! node -v v12.10.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok
npm WARN #babel/helper-create-class-features-plugin#7.6.0 requires a peer of #babel/core#^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN #babel/plugin-transform-named-capturing-groups-regex#7.6.0 requires a peer of #babel/core#^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx#5.0.2 requires a peer of acorn#^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-named-asset-import#0.3.4 requires a peer of #babel/core#^7.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin#2.1.2 requires a peer of webpack#^2.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN next#6.1.2 requires a peer of react#^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN next#6.1.2 requires a peer of react-dom#^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN serviceworker-webpack-plugin#0.2.3 requires a peer of webpack#1 || ^2 || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sw-precache-webpack-plugin#0.9.2 requires a peer of webpack#^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp#1.1.4 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN uglifyjs-webpack-plugin#0.4.6 requires a peer of webpack#^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware#1.12.2 requires a peer of webpack#^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package css-loader is included as both a dev and production dependency.
npm WARN The package style-loader is included as both a dev and production dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! inotify#1.4.6 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the inotify#1.4.6 install 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:
npm ERR! /home/vaibhav/.npm/_logs/2019-09-23T12_00_42_775Z-debug.log
What am I doing wrong?

Upgrading React native from 0.57 to 0.58.5

After upgrading to React Native 0.58.5 from 0.57, there is an error whenever installing a npm module:
npm WARN react-native#0.58.5 requires a peer of react#16.6.3 but none is installed. You must install peer dependencies yourself.
npm ERR! path C:\d\code\js\emps\node_modules\colors
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\d\code\js\emps\node_modules\colors' -> 'C:\d\code\js\emps\node_modules\.colors.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\JunC\AppData\Roaming\npm-cache\_logs\2019-02-25T23_49_59_940Z-debug.log
Here is the part of package.json:
"dependencies": {
"react": "^16.8.2",
"react-native": "^0.58.5",
"react-native-code-push": "^5.5.2",
"react-native-device-info": "^0.26.4",
"react-native-gifted-chat": "^0.7.2",
"react-navigation": "^3.3.0"
},
The react version is alreay 16.8.2 which is newer than what the message suggests. What causes the error message? Is the react-native too new?
pertaining to the npm ERR!, you are required to run npm install color -S as the color package is missing from your json file.
hope this helps!
I end up reinstalling the whole system and notice that the react version is locked at 16.6.2 which is not the latest one (16.8.2). The problem may be incompatibility issues caused by newer react. Here is part of package.json after re-installation:
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-code-push": "^5.5.2",
"react-native-device-info": "^0.26.4",
"react-native-gifted-chat": "^0.7.2",
"react-native-navigation": "^2.12.0",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}

Resources