Could not resolve dependency: google-maps-react - node.js

It is my first time to clone react project from github
i did:
$ git clone <link>
after that:
npm install
but i faced an error with google-maps-react
$ npm install --save google-maps-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: #iso/here#4.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#"~0.14.8 || ^15.0.0 || ^16.0.0" from google-maps-react#2.0.6
npm ERR! node_modules/google-maps-react
npm ERR! google-maps-react#"^2.0.6" 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\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.
i tried:
$ npm cache clean --force
$ npm install -g npm
,:
$npm config set legacy-peer-deps true
,:
npm install --force
,:
npm install --save --legacy-peer-deps
,:
rm -rf node_modules
and more ..
node js version:
16.13.2
react version:
17.0.2
npm version:
8.4.1
nothing seem to work
am i missing something?

The project has a peer dependency on React 15 or 16 and you are using 17.0.2 - The npm error states the reason
Downgrade your react version if you want to use this library as is or change the package.json for the lib, test and confirm to the author that they are good on 17.0.2 raising a PR
"peerDependencies": {
"react": "~0.14.8 || ^15.0.0 || ^16.0.0",
"react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0"
},
Here's npm telling you reason in the log
npm ERR! Fix the upstream dependency conflict, or retry

Solution:
The app is using "yarn"
I'm able now to run the app after installing "yarn add node-sass"

Related

How should I resolve this Angular node package module dependency conflict?

I just updated all my node modules using npm-check-updates.
I did this so I could install the latest version ngx-stripe, which needed some updated node modules that I didn't have installed.
After updating all my node modules and then trying to install ngx-stripe I got this error below, showing me that ngx-gallery-9#1.0.6 has a peer dependency of tslib 1.10.0, which is true, but my installed version is tslib 2.5.0 in node modules.
QUESTION - Should I use --force or --legacy-peer-deps when running the npm install for ngx-stripe or is there something else I should try first like updating the tslib peer dependency for ngx-gallery-9?
Here is what I see:
➜ client git:(master) ✗ npm install ngx-stripe #stripe/stripe-js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ngx-gallery-9#1.0.6
npm ERR! Found: tslib#2.5.0
npm ERR! node_modules/tslib
npm ERR! tslib#"^2.3.0" from #angular/animations#15.1.2
npm ERR! node_modules/#angular/animations
npm ERR! peerOptional #angular/animations#"15.1.2" from #angular/platform-browser#15.1.2
npm ERR! node_modules/#angular/platform-browser
npm ERR! peer #angular/platform-browser#"15.1.2" from #angular/forms#15.1.2
npm ERR! node_modules/#angular/forms
npm ERR! peer #angular/forms#"^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0" from #zxing/ngx-scanner#3.8.0
npm ERR! node_modules/#zxing/ngx-scanner
npm ERR! 2 more (ngx-bootstrap, the root project)
npm ERR! 3 more (#angular/platform-browser-dynamic, #angular/router, the root project)
npm ERR! peer #angular/animations#"^15.0.0" from ngx-bootstrap#10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR! ngx-bootstrap#"^10.2.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! tslib#"^2.3.0" from #angular/common#15.1.2
npm ERR! node_modules/#angular/common
npm ERR! peer #angular/common#"15.1.2" from #angular/forms#15.1.2
npm ERR! node_modules/#angular/forms
npm ERR! peer #angular/forms#"^11.2.11 || ^12.0.4 || ^13.0.0 || ^14.0.0 || ^15.0.0" from #zxing/ngx-scanner#3.8.0
npm ERR! node_modules/#zxing/ngx-scanner
npm ERR! #zxing/ngx-scanner#"^3.8.0" from the root project
npm ERR! 2 more (ngx-bootstrap, the root project)
npm ERR! peer #angular/common#"^15.0.0 || ^16.0.0" from #angular/google-maps#15.1.2
npm ERR! node_modules/#angular/google-maps
npm ERR! #angular/google-maps#"^15.1.2" from the root project
npm ERR! 10 more (#angular/platform-browser, ...)
npm ERR! 20 more (#angular/compiler, #angular/compiler-cli, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer tslib#"^1.10.0" from ngx-gallery-9#1.0.6
npm ERR! node_modules/ngx-gallery-9
npm ERR! ngx-gallery-9#"^1.0.6" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: tslib#1.14.1
npm ERR! node_modules/tslib
npm ERR! peer tslib#"^1.10.0" from ngx-gallery-9#1.0.6
npm ERR! node_modules/ngx-gallery-9
npm ERR! ngx-gallery-9#"^1.0.6" 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:
npm ERR! /Users/charles/.npm/_logs/2023-01-27T08_58_58_320Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/charles/.npm/_logs/2023-01-27T08_58_58_320Z-debug-0.log
➜ client git:(master) ✗
Your problem is completely unrelated to ngx-stripe, but whenever you run npm install, NPM tries to fix all of its dependencies in package.json at the same time, and because you have a problem with ngx-gallery-9, all npm installs are failing. You can ignore the error for now, using --legacy-peer-deps, which will tell NPM to not try to deal with peer dependencies and just let you install the thing you want to install (ngx-stripe).
With regards to fixing the error itself, there's not much you can do here. ngx-gallery-9 is using an older version of tslib, and hasn't been updated for a long time. There's currently an open bug requesting that the library maintainer update his packages.
More specifically,
Angular 15 requires tslib#"^2.3.0", but ngx-gallery-9 requires tslib#"^1.10.0". You can try forcing it to use the latest version by using --legacy-peer-deps during ALL your future npm installations, as well as running npm install tslib#^2.3.0 --save --legacy-peer-deps to manually choose to use the newer version, which will force the whole project to use tslib#"^2.3.0" and ignore ngx-gallery-9's complaints, but there's a strong possibility that ngx-gallery-9 won't work as expected.
Your best bet is to either
use a different gallery than ngx-gallery-9, or
Simply ignore the problem. Force everything to use tslib#"^2.3.0" with npm install tslib#^2.3.0 --save --legacy-peer-deps and hope ngx-gallery-9 won't have any errors, or
downgrade Angular to an earlier version (Which is very messy, and not really recommended unless you didn't intend to be using Angular 15).
Edit:
Or instead undo all the changes that npm-check-updates did, and instead just install an older version of ngx-stripe that's compatible with all of your packages. ngx-stripe has a chart showing which version to use depending on your version of Angular, here: https://www.npmjs.com/package/ngx-stripe
Just type:
npm install ngx-stripe #stripe/stripe-js --force
or npm install ngx-stripe #stripe/stripe-js--legacy-peer-deps

Unresolved dependency peer webpack#"^4.0.0" from css-loader#2.1.1

I was trying to run a react project. React and Node version Installed:
React: 18.1.0
Node: 16.15.1
Package manager: npm v 8.12.1
OS: macOS Catalina 10.15.7
Any help in resolving the errors will be appreciated!
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: cbioportal-frontend#3.3.182
npm ERR! Found: webpack#5.55.1
npm ERR! node_modules/webpack
npm ERR! webpack#"^5.55.1" from the root project
npm ERR! peer webpack#"*" from bootstrap-loader#1.3.3
npm ERR! node_modules/bootstrap-loader
npm ERR! bootstrap-loader#"^1.2.0-beta.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^4.0.0" from css-loader#2.1.1
npm ERR! node_modules/css-loader
npm ERR! css-loader#"^2.1.1" from the root project
npm ERR! peer css-loader#"*" from bootstrap-loader#1.3.3
npm ERR! node_modules/bootstrap-loader
npm ERR! bootstrap-loader#"^1.2.0-beta.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.```
I tried this and now it is working for me first check the version on the node by executing this command node -v and if you don't have this node versions v12.22.12 install it by executing this command nvm install 12.22.12 and then use this node only by executing this command nvm use 12.22.12 and then restart your terminal(close all terminal) and then start
Based on the error message, there is dependency conflict between css-loader#^2.1.1" and webpack#^4.0.0.
Try npm uninstall --save-dev css-loader webpack to uninstall the dependencies entirely.
Then reinstall them with npm install --save-dev css-loader webpack.
Hopefully, there won't be any dependency conflict with the latest versions, but if so, try npm install --legacy-peer-deps

npm install error while use webpack, Could not resolve dependency

The error as follows:
> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack#3.12.0
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^3.5.6" from the root project
npm ERR! peer webpack#"2 || 3 || 4" from _babel-loader#7.1.5#babel-loader#7.1.5
npm ERR! node_modules/_babel-loader#7.1.5#babel-loader
npm ERR! 5 more (_html-webpack-plugin#2.30.1#html-webpack-plugin, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^2.0.0" from _strip-pragma-loader#1.0.0#strip-pragma-loader#1.0.0
npm ERR! node_modules/_strip-pragma-loader#1.0.0#strip-pragma-loader
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/agou-ops/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/agou-ops/.npm/_logs/2021-04-12T02_49_11_062Z-debug.log
debug.log file content:
packge version and system
npm: 7.6.3
webpack: 3.12.0
system: Ubuntu 20.04
How should I fix it?
npm#7 has stricter dependency resolution than previous versions. If you can update the version of webpack in your root project, that may resolve it. An alternative easy quick thing to try is npm install --legacy-peer-deps.
I met the same problem.
try to run the command with --force , if you don't use the related package.
e.g.
npm install --verbose --force
For npm v7+. It is due to missing dependencies for entries mentioned in the package.json file
use:
npm i --force
or
npm i --legacy-peer-deps
to override peer dependency.
Answered in
Downgrade to a lower npm version with, for example,
npm install npm#6

I've downloaded Angular 7 project while my global version is 11 so ng serve , ng update all of them give me errors like that

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: #angular-devkit/build-angular#0.12.4
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1100.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev #angular-devkit/build-angular#"~0.1100.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #angular/compiler-cli#11.0.5
npm ERR! node_modules/#angular/compiler-cli
npm ERR! peer #angular/compiler-cli#"^11.0.0" from #angular-devkit/build-angular#0.1100.5
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"~0.1100.5" 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.
Please try by using the below command :-
npm install --save-dev webpack-dev-server
Or
ng update #angular/cli #angular/core --allow-dirty --force
I solved the same problem downgrading npm to version 6
npm install -g npm#6.14.13
and then update Angular

Unable to resolve dependency tree with eslint-config-airbnb

when I'm trying to install eslint-config-airbnb with npx install-peerdeps --dev eslint-config-airbnb I'm getting following error (--legacy-peer-deps flag doesn't help):
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: favnote#0.1.0
npm ERR! Found: eslint#7.2.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"7.2.0" from the root project
npm ERR! peer eslint#"^5.16.0 || ^6.8.0 || ^7.2.0" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb#"18.2.1" from the root project
npm ERR! 3 more (eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from eslint-plugin-react-hooks#4.0.0
npm ERR! node_modules/eslint-plugin-react-hooks
npm ERR! dev eslint-plugin-react-hooks#"4.0.0" from the root project
npm ERR! peer eslint-plugin-react-hooks#"^4 || ^3 || ^2.3.0 || ^1.7.0" from eslint-config-airbnb#18.2.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb#"18.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! ```
Run npm install --legacy-peer-deps and they will install successfully.
Looking at your package.json and comparing it to the peer dependencies listed for eslint-config-airbnb, you already have all the peer dependencies in your package.json as dev dependencies. (They were probably added there when you ran the npx install-peerdeps command but then that command tried to run npm install and failed.)
You can try locking in a specific working Node version by using nvm to roll Node back a few versions.
I rolled back from v16.15 to v16.13 and that seemed to fix the issue locally so I locked in that version with node -v > .nvmrc so that my hosting on Netlify/Vercel will use the version I specified.

Resources