NPM Next / React package dependency conflict - node.js

I know this is related to React / React-DOM package dependency conflict, but the solutions which I can find there don't really help me.
When installing/updating a dependency or when deploying my Next.js app to Vercel, I get some of the following errors:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: use-ackee#3.0.1
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#"^18.0.0" from #testing-library/react#13.4.0
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^13.4.0" from the root project
npm ERR! 5 more (next, react-dom, react-helmet, react-side-effect, styled-jsx)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from use-ackee#3.0.1
npm ERR! node_modules/use-ackee
npm ERR! use-ackee#"^3.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^17.0.0" from use-ackee#3.0.1
npm ERR! node_modules/use-ackee
npm ERR! use-ackee#"^3.0.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!
My package.json looks like this:
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"next": "^13.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"sass": "^1.58.0",
"use-ackee": "^3.0.1",
"web-vitals": "^2.1.4"
},
I'm fully aware that I can just use --force or --legacy-peer-deps and everything works fine, but this seems like it is not really stable.
What is the exact problem I'm dealing with here? What can I do to resolve those conflicts?

Related

how to fix npm install for react native

i am using react native to build a app every time I try to install a npm package i have to use --force, or --legacy-peer-deps to make it install else i get error so i thought it is because of version of react in my pakgage.json so i dissided to downgrade my react to 17.0.1 from 18.1.0 and i deleted my pakage.lock.json and node modules and i tried npm i then I am getting this error i want to get a clean installation for react native
npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sukprsavam#0.0.1
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native#"^0.0.0-0 || 0.60 - 0.71 || 1000.0.0" from #react-native-async-storage/async-storage#1.17.11
npm ERR! node_modules/#react-native-async-storage/async-storage
npm ERR! #react-native-async-storage/async-storage#"^1.17.11" 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! peer react#"18.1.0" from react-native#0.70.6
npm ERR! node_modules/react-native
npm ERR! react-native#"0.70.6" from the root project
npm ERR! peer react-native#"^0.0.0-0 || 0.60 - 0.71 || 1000.0.0" from #react-native-async-storage/async-storage#1.17.11
npm ERR! node_modules/#react-native-async-storage/async-storage
npm ERR! #react-native-async-storage/async-storage#"^1.17.11" 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\vivek\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\vivek\AppData\Local\npm-cache\_logs\2023-01-04T06_02_30_598Z-debug-0.log
"name": "newapp",
"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"
},
"dependencies": {
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.7",
"axios": "^1.2.2",
"expo": "~47.0.9",
"expo-status-bar": "~1.4.2",
"moment": "^2.29.4",
"react": "18.1.0",
"react-client-session": "^0.0.8",
"react-native": "0.70.5",
"react-native-network-logger": "^1.13.0",
"react-native-paper": "^5.1.2",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-navigation": "^4.4.4"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

What causes npm could not resolve errors?

I have existing project that I tried installing package via npm install.
I cloned my project again thinking that it would fix, but every time I run npm install I am getting this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: eslint-plugin-import#2.24.1
npm ERR! Found: eslint#8.20.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"^8.20.0" from the root project
npm ERR! peer eslint#">= 4.12.1" from babel-eslint#10.1.0
npm ERR! node_modules/babel-eslint
npm ERR! dev babel-eslint#"^10.1.0" from the root project
npm ERR! 3 more (eslint-config-prettier, eslint-plugin-prettier, eslint-utils)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0" from eslint-plugin-import#2.24.1
npm ERR! node_modules/eslint-plugin-import
npm ERR! dev eslint-plugin-import#"^2.23.4" from the root project
npm ERR! peer eslint-plugin-import#"^2.22.1" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! 1 more (eslint-config-airbnb-base)
npm ERR!
npm ERR! Conflicting peer dependency: eslint#7.32.0
npm ERR! node_modules/eslint
npm ERR! peer eslint#"^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0" from eslint-plugin-import#2.24.1
npm ERR! node_modules/eslint-plugin-import
npm ERR! dev eslint-plugin-import#"^2.23.4" from the root project
npm ERR! peer eslint-plugin-import#"^2.22.1" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! 1 more (eslint-config-airbnb-base)
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.
I have no idea what is going on.
what is the reason for this error?
how can I get rid of it?
is it the eslint that I have to remove to fix it?
One possible cause for it is that you have some dependency, which has a peer dependency of specific version. Now, in your package.json you have another version of this peer dependency, so npm tells you this.
You have 2 options:
Use in your package.json dependencies that are required by the problematic package
Use --legacy-peer-deps flag or set this setting in .npmrc file to be true, which will ignore the peer dependency requirement and can possible break your code.
this error can when you cannot install npm on the right folder this answer will help your sir......
otherwise your will try this
npm install --legacy-peer-deps then
it adds this in my package-lock.json
"node_modules/#unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/#unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"dependencies": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
},
"peerDependencies": {
"react-native": "*",
"react-native-web": "~0.13.7"
}
},
...
"#unimodules/react-native-adapter": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/#unimodules/react-native-adapter/-/react-native-adapter-5.7.0.tgz",
"integrity": "sha512-L557/+sc8ZKJVgo1734HF1QNCxrt/fpqdmdNgySJT+kErux/AJNfPq3flsK0fyJduVmniTutYIMyW48cFoPKDA==",
"requires": {
"invariant": "^2.2.4",
"lodash": "^4.5.0"
}
},

React application from github not running on VS Code

sorry for newbie question. I have downloaded a react application from github. When I try to run locally on VS Code it gives me some dependencies errors.
Below is the dependencies on the json file:
"dependencies": {
"#chakra-ui/react": "^1.8.5",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#hookform/resolvers": "^2.8.8",
"algoliasearch": "^4.12.1",
"axios": "^0.26.0",
"framer-motion": "^6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.27.1",
"react-icons": "^4.3.1",
"react-images-uploading": "^3.1.3",
"react-instantsearch-dom": "^6.22.0",
"react-query": "^3.34.16",
"react-router-dom": "^6.2.1",
"react-table": "^7.7.0",
"recharts": "^2.1.9",
"sass": "^1.49.9",
"yup": "^0.32.11",
"zustand": "^3.7.0"
}
Error:
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: admin-family#0.0.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0" from react-images-uploading#3.1.3
npm ERR! node_modules/react-images-uploading
npm ERR! react-images-uploading#"^3.1.3" 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\12392\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\12392\AppData\Local\npm-cache\_logs\2022-03-09T00_59_26_007Z-debug-0.log
Running node v16.14.0
Any help on this appreciated.
run npm install --force or npm install --legacy-peer-deps
this will fix the error, because it ignores the peer dependencies and focuses on the main dependencies.
this has worked for me whenever i've gotten this error

"ERESOLVE unable to resolve dependency tree" when installing AWS CDK construct library

$ npm i #aws-cdk/aws-ec2
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: cdk_sample#0.1.0
npm ERR! Found: #aws-cdk/core#1.95.0
npm ERR! node_modules/#aws-cdk/core
npm ERR! #aws-cdk/core#"1.95.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #aws-cdk/core#"1.95.1" from #aws-cdk/aws-iam#1.95.1
npm ERR! node_modules/#aws-cdk/aws-iam
npm ERR! peer #aws-cdk/aws-iam#"1.95.1" from #aws-cdk/aws-ec2#1.95.1
npm ERR! node_modules/#aws-cdk/aws-ec2
npm ERR! #aws-cdk/aws-ec2#"*" from the root project
npm ERR! peer #aws-cdk/aws-iam#"1.95.1" from #aws-cdk/aws-cloudwatch#1.95.1
npm ERR! node_modules/#aws-cdk/aws-cloudwatch
npm ERR! peer #aws-cdk/aws-cloudwatch#"1.95.1" from #aws-cdk/aws-ec2#1.95.1
npm ERR! node_modules/#aws-cdk/aws-ec2
npm ERR! #aws-cdk/aws-ec2#"*" 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/sean/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sean/.npm/_logs/2021-03-27T00_41_58_124Z-debug.log
sean#desktop:~/WebstormProjects/cdkSample$ npm i #aws-cdk/aws-ec2
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: cdk_sample#0.1.0
npm ERR! Found: #aws-cdk/core#1.95.0
npm ERR! node_modules/#aws-cdk/core
npm ERR! #aws-cdk/core#"1.95.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #aws-cdk/core#"1.95.1" from #aws-cdk/aws-iam#1.95.1
npm ERR! node_modules/#aws-cdk/aws-iam
npm ERR! peer #aws-cdk/aws-iam#"1.95.1" from #aws-cdk/aws-ec2#1.95.1
npm ERR! node_modules/#aws-cdk/aws-ec2
npm ERR! #aws-cdk/aws-ec2#"*" from the root project
npm ERR! peer #aws-cdk/aws-iam#"1.95.1" from #aws-cdk/aws-cloudwatch#1.95.1
npm ERR! node_modules/#aws-cdk/aws-cloudwatch
npm ERR! peer #aws-cdk/aws-cloudwatch#"1.95.1" from #aws-cdk/aws-ec2#1.95.1
npm ERR! node_modules/#aws-cdk/aws-ec2
npm ERR! #aws-cdk/aws-ec2#"*" 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/sean/.npm/eresolve-report.txt for a full report.
The --force option sounds non-ideal. What should be done to fix the upstream dependency conflict? I do know that AWS CDK is very strict when it comes to matching package versions between the core and construct libs.
// project generated via $ cdk init app --language typescript
"devDependencies": {
"#aws-cdk/assert": "1.95.0",
"#types/jest": "^26.0.10",
"#types/node": "10.17.27",
"aws-cdk": "1.95.0",
"jest": "^26.4.2",
"ts-jest": "^26.2.0",
"ts-node": "^9.0.0",
"typescript": "~3.9.7"
},
"dependencies": {
"#aws-cdk/core": "1.95.0",
"source-map-support": "^0.5.16"
}
From comments, installing the dependency with same version as of aws-cdk and #aws-cdk/core solved the issue.
npm install #aws-cdk/aws-ec2#1.95.0

NPM MOdule: react-csv-downloader on install gives Babel not found error

I am looking to install react-csv-downloader package in my project.
when i do npm install react-csv-downloader --save i get this error
react-csv-downloader#0.1.4 postinstall /home/tops/Desktop/demo_projects/mern_stack/node_modules/react-csv-downloader
> npm run build
> react-csv-downloader#0.1.4 build /home/tops/Desktop/demo_projects/mern_stack/node_modules/react-csv-downloader
> babel src -d dist
sh: 1: babel: not found
npm ERR! react-csv-downloader#0.1.4 build: `babel src -d dist`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the react-csv-downloader#0.1.4 build script.
npm ERR! This is most likely a problem with the react-csv-downloader package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel src -d dist
npm ERR! You can get their info via:
npm ERR! npm owner ls react-csv-downloader
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.2.0-42-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! cwd /home/tops/Desktop/demo_projects/mern_stack/node_modules/react-csv-downloader
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/tops/Desktop/demo_projects/mern_stack/node_modules/react-csv-downloader/npm-debug.log
npm ERR! not ok code 0
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
npm ERR! react-csv-downloader#0.1.4 postinstall: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-csv-downloader#0.1.4 postinstall script.
npm ERR! This is most likely a problem with the react-csv-downloader package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get their info via:
npm ERR! npm owner ls react-csv-downloader
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.2.0-42-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "react-csv-downloader" "--save"
npm ERR! cwd /home/tops/Desktop/demo_projects/mern_stack
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/tops/Desktop/demo_projects/mern_stack/npm-debug.log
npm ERR! not ok code 0
I am using gulp in my project and here is my package.json
"dependencies": {
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"bluebird": "^3.4.6",
"body-parser": "^1.15.2",
"browserify": "^13.1.0",
"express": "^4.14.0",
"fixed-data-table": "^0.6.3",
"fs": "0.0.1-security",
"gulp": "^3.9.1",
"history": "^4.3.0",
"jquery": "^3.1.1",
"json2xls": "^0.1.2",
"mongodb": "^2.2.10",
"multer": "^1.2.0",
"react": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-bootstrap-table": "^2.5.5",
"react-dom": "^15.3.2",
"react-router": "^2.8.1",
"superagent": "^2.3.0",
"superagent-bluebird-promise": "^4.1.0",
"superagent-promise-headers": "^1.2.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
Please help me to install this package.
Thanks.
It's not mentioned anywhere in the docs, but you will need to add babel-cli as your dev dependency and it will work.

Resources