title: How do I read npm "conflicting peer dependency" error messages?
body: <p>I'm in the process of trying to upgrade some npm dependencies of a project I own, and I'm getting a &quot;conflicting peer dependency&quot; error.</p>
  <p>I see a lot of questions on this site asking for help fixing such errors. However, I've struggled to find information on what these errors actually <em>mean</em>. I feel like if I understood that, I'd have a fighting chance of figuring out how to solve the problem on my own.</p>
  <p>Here's the error message I'm trying to interpret:</p>
  <pre><code>npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR! 
  npm ERR! Found: @angular-devkit/build-angular@0.1102.5
  npm ERR! node_modules/@angular-devkit/build-angular
  npm ERR!   dev @angular-devkit/build-angular@&quot;~0.1102.9&quot; from the root project
  npm ERR! 
  npm ERR! Could not resolve dependency:
  npm ERR! dev @angular-devkit/build-angular@&quot;~0.1102.9&quot; from the root project
  npm ERR! 
  npm ERR! Conflicting peer dependency: @angular/localize@11.2.10
  npm ERR! node_modules/@angular/localize
  npm ERR!   peerOptional @angular/localize@&quot;^11.0.0 || ^11.2.0-next&quot; from @angular-devkit/build-angular@0.1102.9
  npm ERR!   node_modules/@angular-devkit/build-angular
  npm ERR!     dev @angular-devkit/build-angular@&quot;~0.1102.9&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.
  </code></pre>
  <p>This can be reproduced by running <code>npm install</code> in the root of <a href="https://github.com/google/peoplemath/tree/ngconflict" rel="noreferrer">this Github branch</a> (I'm using npm <code>7.10.0</code>.)</p>
  <p>My general understanding of a &quot;conflicting peer dependency&quot; error is that some package I depend upon is expressing a <a href="https://docs.npmjs.com/cli/v7/configuring-npm/package-json#peerdependencies" rel="noreferrer">peer dependency</a> on a package version spec which does not match the version of that package that I actually have installed.</p>
  <p>For example, if my project has direct dependencies on packages <code>A</code> and <code>B</code>, and I have version <code>12.0.0</code> of <code>A</code> installed but my version of <code>B</code> has a peer dependency on <code>^11.0.0</code> of package <code>A</code>, then I will get a conflicting peer dependency error, because I'm using <code>B</code> with a version of <code>A</code> that it is potentially incompatible with.</p>
  <p>Therefore, my best guess as to what this error message could mean is that some package I depend upon has a peer dependency on <code>@angular/localize</code> version spec <code>^11.0.0 || ^11.2.0-next</code>, but this spec does not match the version of <code>@angular/localize</code> I have installed.</p>
  <p>When I look at <a href="https://raw.githubusercontent.com/google/peoplemath/ngconflict/package-lock.json" rel="noreferrer">my package-lock.json</a>, I do see that the <code>node_modules/@angular-devkit/build-angular</code> entry has an entry <code>&quot;@angular/localize&quot;: &quot;^11.0.0 || ^11.2.0-next&quot;</code> in its <code>peerDependencies</code>.</p>
  <p>However, this is the only mention of <code>@angular/localize</code> anywhere in this file -- or indeed in <a href="https://raw.githubusercontent.com/google/peoplemath/ngconflict/package.json" rel="noreferrer">package.json</a>. I haven't explicitly requested for it to be installed. Furthermore, it is marked as <code>&quot;optional&quot;: true</code> in the <code>peerDependenciesMeta</code> of <code>node_modules/@angular-devkit/build-angular</code>. So it's surprising to see an error message related to it.</p>
  <p>The error mentions that the specific conflicting peer dependency is <code>@angular/localize@11.2.10</code>. I don't see where that version number is coming from. But regardless,  it actually seems to match the dependency specification underneath: if I go to <a href="https://semver.npmjs.com/" rel="noreferrer">semver.npmjs.com</a> and type in <code>@angular/localize</code> as the package and <code>^11.0.0 || ^11.2.0-next</code> as the version range, I see version <code>11.2.10</code> of the package highlighted in green, indicating that it matches the range.</p>
  <p>So I'd really appreciate some help understanding in detail what this error message is telling me. I don't know why <code>npm</code> is trying to install <code>11.2.10</code> of <code>@angular/localize</code>, or why it thinks this conflicts with the peer dependency specification of <code>@angular-devkit/build-angular</code>. It feels like I might be misunderstanding this message completely.</p>
  <p>I'm guessing this boils down to some kind of incompatibility between the latest published versions of some of the Angular packages. If anyone has any pointers on how this particular error should be fixed, that would be great -- but I'm much more interested in simply understanding what the error message is telling me, so I can work it out for myself.</p>
  <p>Many thanks in advance!</p>