<h3 dir="auto">Is there an existing issue for this?</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the existing issues</li>
</ul>
<h3 dir="auto">Current Behavior</h3>
<p dir="auto">When I try to run npm audit fix, I get the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@&quot;&gt;=2&quot; from babel-loader@8.1.0
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@&quot;8.1.0&quot; from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@&quot;^4.0.3&quot; from the root project
npm ERR!   peer webpack@&quot;^4.27.0 || ^5.0.0&quot; from css-loader@4.3.0
npm ERR!   node_modules/css-loader
npm ERR!     css-loader@&quot;4.3.0&quot; from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@&quot;^4.0.3&quot; from the root project
npm ERR!   16 more (eslint-webpack-plugin, file-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@&quot;&gt;=4.43.0 &lt;6.0.0&quot; from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm ERR! node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@&quot;0.4.3&quot; from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@&quot;^4.0.3&quot; 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/jemucino/.npm/eresolve-report.txt for a full report."><pre class="notranslate"><code class="notranslate">npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"&gt;=2" from babel-loader@8.1.0
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@"8.1.0" from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"^4.0.3" from the root project
npm ERR!   peer webpack@"^4.27.0 || ^5.0.0" from css-loader@4.3.0
npm ERR!   node_modules/css-loader
npm ERR!     css-loader@"4.3.0" from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"^4.0.3" from the root project
npm ERR!   16 more (eslint-webpack-plugin, file-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"&gt;=4.43.0 &lt;6.0.0" from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm ERR! node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@"0.4.3" from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"^4.0.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 /home/jemucino/.npm/eresolve-report.txt for a full report.
</code></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">I don't know enough about NPM to say what the expected behavior should be, but shouldn't the found version (4.44.2) satisfy the peer dependency(&gt;=4.43.0 &lt;6.0.0)?</p>
<h3 dir="auto">Steps To Reproduce</h3>
<ol dir="auto">
<li>In my PC (on WSL with Ubuntu 20.04) and using npm@7.16.0</li>
<li>Within a React app created with create-react-app</li>
<li>Run 'npm audit fix'</li>
<li>See error:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@&quot;&gt;=2&quot; from babel-loader@8.1.0
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@&quot;8.1.0&quot; from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@&quot;^4.0.3&quot; from the root project
npm ERR!   peer webpack@&quot;^4.27.0 || ^5.0.0&quot; from css-loader@4.3.0
npm ERR!   node_modules/css-loader
npm ERR!     css-loader@&quot;4.3.0&quot; from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@&quot;^4.0.3&quot; from the root project
npm ERR!   16 more (eslint-webpack-plugin, file-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@&quot;&gt;=4.43.0 &lt;6.0.0&quot; from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm ERR! node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@&quot;0.4.3&quot; from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@&quot;^4.0.3&quot; 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/jemucino/.npm/eresolve-report.txt for a full report."><pre lang="npm" class="notranslate"><code class="notranslate">npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@4.44.2
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"&gt;=2" from babel-loader@8.1.0
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@"8.1.0" from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"^4.0.3" from the root project
npm ERR!   peer webpack@"^4.27.0 || ^5.0.0" from css-loader@4.3.0
npm ERR!   node_modules/css-loader
npm ERR!     css-loader@"4.3.0" from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"^4.0.3" from the root project
npm ERR!   16 more (eslint-webpack-plugin, file-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"&gt;=4.43.0 &lt;6.0.0" from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm ERR! node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@"0.4.3" from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"^4.0.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 /home/jemucino/.npm/eresolve-report.txt for a full report.
</code></pre></div>
<h3 dir="auto">Environment</h3>
<ul dir="auto">
<li>OS: WSL (Ubuntu-20.04)</li>
<li>Node: v14.17.0</li>
<li>npm: 7.16.0</li>
</ul>
<p dir="auto">Reopening <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="858810561" data-permission-text="Title is private" data-url="https://github.com/npm/cli/issues/3083" data-hovercard-type="issue" data-hovercard-url="/npm/cli/issues/3083/hovercard" href="https://github.com/npm/cli/issues/3083">#3083</a>, given that <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="859082347" data-permission-text="Title is private" data-url="https://github.com/npm/arborist/issues/266" data-hovercard-type="pull_request" data-hovercard-url="/npm/arborist/pull/266/hovercard" href="https://github.com/npm/arborist/pull/266">npm/arborist#266</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="869334581" data-permission-text="Title is private" data-url="https://github.com/npm/arborist/issues/272" data-hovercard-type="pull_request" data-hovercard-url="/npm/arborist/pull/272/hovercard" href="https://github.com/npm/arborist/pull/272">npm/arborist#272</a> didn't fix the issue.</p>
<h3 dir="auto">Current Behavior:</h3>
<p dir="auto">When having multiple packages relying on each others having the exact same version, trying to update them all via <code class="notranslate">npm install</code> fails when there is another package which loosely rely on them via <code class="notranslate">"peerDependencies": "^x.x.x"</code>, due to npm7 erroneous resolution.</p>
<p dir="auto">Real world example: Angular core packages are supposed to be installed with the exact same version, so for example <code class="notranslate">@angular/common@11.2.9</code> has <code class="notranslate">"peerDependencies": { "angular/core": "11.2.9" }</code> (note the <em>exact</em> version).</p>
<p dir="auto">Until now everything is fine. You can update all versions to <code class="notranslate">11.2.10</code> in <code class="notranslate">package.json</code>, run <code class="notranslate">npm install</code> and it works.</p>
<p dir="auto">But now add another package which relies on one of the core packages, for example <code class="notranslate">@angular-devkit/build-angular@11.2.9</code> has a <code class="notranslate">"peerDependencies": { "@angular/compiler-cli": "^11.0.0 || ^12.0.0-next" }</code>.</p>
<p dir="auto">Now if you update all versions to <code class="notranslate">11.2.10</code> in <code class="notranslate">package.json</code> and run <code class="notranslate">npm install</code>, it fails.</p>
<h3 dir="auto">Expected Behavior:</h3>
<p dir="auto"><code class="notranslate">npm install</code> should work, as versions are correct and <code class="notranslate">peerDependencies</code> are respected.</p>
<h3 dir="auto">Steps To Reproduce:</h3>
<p dir="auto">Working:</p>
<ol dir="auto">
<li><code class="notranslate">mkdir npmissue</code></li>
<li><code class="notranslate">cd npmissue</code></li>
<li><code class="notranslate">npm init -y</code></li>
<li><code class="notranslate">npm install @angular/common@11.2.9 @angular/compiler@11.2.9 @angular/core@11.2.9 @angular/platform-browser@11.2.9 @angular/platform-browser-dynamic@11.2.9 -E</code></li>
<li><code class="notranslate">npm install @angular/compiler-cli@11.2.9 -D -E</code></li>
<li>Search/replace <code class="notranslate">11.2.9</code> &gt; <code class="notranslate">11.2.10</code> in <code class="notranslate">package.json</code></li>
<li><code class="notranslate">npm install</code>: OK</li>
</ol>
<p dir="auto">Failing:</p>
<ol dir="auto">
<li>Previous steps from 1 to 5 (included)</li>
<li><code class="notranslate">npm install @angular-devkit/build-angular@0.1102.9 -D -E</code></li>
<li>Search/replace <code class="notranslate">11.2.9</code> &gt; <code class="notranslate">11.2.10</code> and <code class="notranslate">0.1102.9</code> &gt; <code class="notranslate">0.1102.10</code> in <code class="notranslate">package.json</code></li>
<li><code class="notranslate">npm install</code>: fails with <code class="notranslate">peerDependencies</code> errors</li>
</ol>
<p dir="auto">npm log</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Found: @angular/common@11.2.9
node_modules/@angular/common
  @angular/common@&quot;11.2.10&quot; from the root project
  peer @angular/common@&quot;11.2.9&quot; from @angular/platform-browser@11.2.9
  node_modules/@angular/platform-browser
    @angular/platform-browser@&quot;11.2.10&quot; from the root project
    peer @angular/platform-browser@&quot;11.2.9&quot; from @angular/platform-browser-dynamic@11.2.9
    node_modules/@angular/platform-browser-dynamic
      @angular/platform-browser-dynamic@&quot;11.2.10&quot; from the root project
  peer @angular/common@&quot;11.2.9&quot; from @angular/platform-browser-dynamic@11.2.9
  node_modules/@angular/platform-browser-dynamic
    @angular/platform-browser-dynamic@&quot;11.2.10&quot; from the root project

Could not resolve dependency:
@angular/common@&quot;11.2.10&quot; from the root project

Conflicting peer dependency: @angular/core@11.2.10
node_modules/@angular/core
  peer @angular/core@&quot;11.2.10&quot; from @angular/common@11.2.10
  node_modules/@angular/common
    @angular/common@&quot;11.2.10&quot; 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."><pre class="notranslate"><code class="notranslate">Found: @angular/common@11.2.9
node_modules/@angular/common
  @angular/common@"11.2.10" from the root project
  peer @angular/common@"11.2.9" from @angular/platform-browser@11.2.9
  node_modules/@angular/platform-browser
    @angular/platform-browser@"11.2.10" from the root project
    peer @angular/platform-browser@"11.2.9" from @angular/platform-browser-dynamic@11.2.9
    node_modules/@angular/platform-browser-dynamic
      @angular/platform-browser-dynamic@"11.2.10" from the root project
  peer @angular/common@"11.2.9" from @angular/platform-browser-dynamic@11.2.9
  node_modules/@angular/platform-browser-dynamic
    @angular/platform-browser-dynamic@"11.2.10" from the root project

Could not resolve dependency:
@angular/common@"11.2.10" from the root project

Conflicting peer dependency: @angular/core@11.2.10
node_modules/@angular/core
  peer @angular/core@"11.2.10" from @angular/common@11.2.10
  node_modules/@angular/common
    @angular/common@"11.2.10" 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.
</code></pre></div>
<h3 dir="auto">Environment:</h3>
<ul dir="auto">
<li>OS: macOS 11.2.3</li>
<li>Node: 14.16.1</li>
<li>npm: 7.11.2</li>
</ul>
<h3 dir="auto">Additional information:</h3>
<p dir="auto">This issue was raised because it causes issues in automatic dependencies update tools like Renovate, which are doing exactly what I described: updating the <code class="notranslate">package.json</code> and then doing a <code class="notranslate">npm install</code>.</p>
<p dir="auto">See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="858567466" data-permission-text="Title is private" data-url="https://github.com/renovatebot/renovate/issues/9561" data-hovercard-type="issue" data-hovercard-url="/renovatebot/renovate/issues/9561/hovercard" href="https://github.com/renovatebot/renovate/issues/9561">renovatebot/renovate#9561</a> for the Renovate issue, and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="858329898" data-permission-text="Title is private" data-url="https://github.com/cyrilletuzi/angular-async-local-storage/issues/628" data-hovercard-type="pull_request" data-hovercard-url="/cyrilletuzi/angular-async-local-storage/pull/628/hovercard" href="https://github.com/cyrilletuzi/angular-async-local-storage/pull/628">cyrilletuzi/angular-async-local-storage#628</a> for a real world example, with npm logs.</p>
<h3 dir="auto">Additional debug info:</h3>
<p dir="auto">Doing <code class="notranslate">rm -rf node_modules &amp;&amp; rm package-lock.json</code>, then <code class="notranslate">npm install</code> works without errors or warnings.</p>
<p dir="auto">Or doing <code class="notranslate">npm install --force</code>, then <code class="notranslate">npm install</code> has no more errors.</p>
<p dir="auto">Meaning the <code class="notranslate">peerDependencies</code> are indeed respected and it should work in the first place. Seems like the presence of <code class="notranslate">package-lock.json</code> and/or <code class="notranslate">node_modules</code> results in an issue in correct dependencies resolution.</p>