[BUG] Multiple related packages install fail due to wrong peerDependencies resolution

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Reopening #3171 (cc @cyrilletuzi)

(The content below is modified from #3171)

When having multiple packages relying on each others having the exact same version, trying to update them all via npm install fails when there is another package which loosely rely on them via "peerDependencies": "^x.x.x", due to npm7 erroneous resolution.

Real world example: Angular core packages are supposed to be installed with the exact same version, so for example @angular/common@12.1.1 has "peerDependencies": { "@angular/core": "12.1.1" } (note the exact version).

Until now everything is fine. You can update all versions to 12.2.1 in package.json, run npm install and it works.

But now add another package which relies on one of the core packages, for example @angular-devkit/build-angular@11.2.9 has a "peerDependencies": { "@angular/compiler-cli": "^11.0.0 || ^12.0.0-next" }.

Now if you update all versions to 11.2.10 in package.json and run npm install, it fails.

(The striketrough text issue has been solved in npm@7.20.3, as stated in https://github.com/npm/cli/issues/3171#issuecomment-893219481.)

This time, there are two more dependencies that become related in this, namely:

• @angular/animations@12.1.1. Similar to @angular/common@12.1.1, this package has "peerDependencies": { "@angular/core": "12.1.1" }
• ngx-clipboard@14.0.1, which is a clipboard library for Angular. This one has the following:

"peerDependencies": {
    "@angular/common": ">=10.0.0",
    "@angular/core": ">=10.0.0"
}

If you modify all 12.1.1 versions to 12.2.2 and run npm install, I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: npm-test@0.0.0
npm ERR! Found: @angular/animations@12.1.1
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"12.2.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/animations@"12.2.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.2.2
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.2" from @angular/animations@12.2.2
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"12.2.2" 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/sarunint/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sarunint/.npm/_logs/2021-08-19T20_20_01_099Z-debug.log

I've created test packages to try to debug this issue, and published them to my GitLab registry.

I also discovered that the order of the package names does matter, surprisingly! As you can see with my test packages, I've dedicated package-4 to ngx-clipboard in the above example, and package-{1,2,3} to 3 @angular/* packages, with all 6 permutations (order-{a,b,c,d,e,f}). It turns out that only permutation d and f does reproduce the issue.

Expected Behavior

npm install should work, as versions are correct and peerDependencies are respected.

Steps To Reproduce

1. mkdir npmissue
2. cd npmissue
3. echo "@sarunint:registry=https://gitlab.com/api/v4/projects/28910102/packages/npm/" > .npmrc
4. npm init -y
5. npm install -E @sarunint/order-f-package-1@1.0.0 @sarunint/order-f-package-2@1.0.0 @sarunint/order-f-package-3@1.0.0 @sarunint/order-f-package-4@1.0.0
6. Replace 1.0.0 with 1.0.1 for only first 3 packages.
7. npm install: should fail with following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: npmissue@1.0.0
npm ERR! Found: @sarunint/order-f-package-1@1.0.0
npm ERR! node_modules/@sarunint/order-f-package-1
npm ERR!   @sarunint/order-f-package-1@"1.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @sarunint/order-f-package-1@"1.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @sarunint/order-f-package-3@1.0.1
npm ERR! node_modules/@sarunint/order-f-package-3
npm ERR!   peer @sarunint/order-f-package-3@"1.0.1" from @sarunint/order-f-package-1@1.0.1
npm ERR!   node_modules/@sarunint/order-f-package-1
npm ERR!     @sarunint/order-f-package-1@"1.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!
npm ERR! See /home/sarunint/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sarunint/.npm/_logs/2021-08-19T19_47_04_754Z-debug.log

(You can try replace order-f with other variants. Only order-d and order-f will reproduce the issue.)

Environment

• OS: Arch
• Node: 14.17.5
• npm: 7.21.0

Start by reproducing the failure with the listed npm init and npm install steps using the order-f packages, then compare the working and failing permutations. Trace npm 7.21.0 peerDependencies resolution for the exact and loosely ranged package relationships; done means the first three packages update successfully and all permutations resolve without ERESOLVE.