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

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 [email protected] 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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslib
npm ERR!   tslib@"^2.3.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"15.1.2" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"15.1.2" from @angular/[email protected]
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/[email protected]
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 [email protected]
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/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"15.1.2" from @angular/[email protected]
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/[email protected]
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/[email protected]
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 [email protected]
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: [email protected]
npm ERR! node_modules/tslib
npm ERR!   peer tslib@"^1.10.0" from [email protected]
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) ✗

CodePudding user response：

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