title: NPM Dependency Resolution Conflicts
body: <p>When I run <code>node install</code> I get the following output:</p>
  <pre><code>npm ERR! code ERESOLVE
  npm ERR! ERESOLVE could not resolve
  npm ERR! 
  npm ERR! While resolving: google-map-react@2.1.10
  npm ERR! Found: react@18.1.0
  npm ERR! node_modules/react
  npm ERR!   react@&quot;^18.1.0&quot; from the root project
  npm ERR!   peer react@&quot;&gt;=16.3&quot; from @deck.gl/react@8.7.8
  npm ERR!   node_modules/@deck.gl/react
  npm ERR!     @deck.gl/react@&quot;8.7.8&quot; from deck.gl@8.7.8
  npm ERR!     node_modules/deck.gl
  npm ERR!       deck.gl@&quot;^8.7.8&quot; from the root project
  npm ERR!   15 more (@emotion/react, @emotion/styled, @mui/base, ...)
  npm ERR! 
  npm ERR! Could not resolve dependency:
  npm ERR! peer react@&quot;^16.0.0 || ^17.0.0&quot; from google-map-react@2.1.10
  npm ERR! node_modules/google-map-react
  npm ERR!   google-map-react@&quot;^2.1.10&quot; from the root project
  npm ERR! 
  npm ERR! Conflicting peer dependency: react@17.0.2
  npm ERR! node_modules/react
  npm ERR!   peer react@&quot;^16.0.0 || ^17.0.0&quot; from google-map-react@2.1.10
  npm ERR!   node_modules/google-map-react
  npm ERR!     google-map-react@&quot;^2.1.10&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>and here is my <code>package.json</code> file:</p>
  <pre><code>{
      &quot;name&quot;: &quot;frontend&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
          &quot;@emotion/react&quot;: &quot;^11.9.0&quot;,
          &quot;@emotion/styled&quot;: &quot;^11.8.1&quot;,
          &quot;@mui/icons-material&quot;: &quot;^5.6.2&quot;,
          &quot;@mui/material&quot;: &quot;^5.6.3&quot;,
          &quot;deck.gl&quot;: &quot;^8.7.8&quot;,
          &quot;react&quot;: &quot;^18.1.0&quot;,
          &quot;react-dom&quot;: &quot;^18.1.0&quot;,
          &quot;react-router&quot;: &quot;^6.3.0&quot;,
          &quot;react-router-dom&quot;: &quot;^5.1.2&quot;,
          &quot;react-scripts&quot;: &quot;5.0.1&quot;,
          &quot;react-transition-group&quot;: &quot;^4.3.0&quot;
      },
      &quot;scripts&quot;: {
          &quot;start&quot;: &quot;react-scripts start&quot;,
          &quot;build&quot;: &quot;react-scripts build&quot;,
          &quot;test&quot;: &quot;react-scripts test&quot;,
          &quot;eject&quot;: &quot;react-scripts eject&quot;
      },
      &quot;eslintConfig&quot;: {
          &quot;extends&quot;: &quot;react-app&quot;
      },
      &quot;browserslist&quot;: {
          &quot;production&quot;: [
              &quot;&gt;0.2%&quot;,
              &quot;not dead&quot;,
              &quot;not op_mini all&quot;
          ],
          &quot;development&quot;: [
              &quot;last 1 chrome version&quot;,
              &quot;last 1 firefox version&quot;,
              &quot;last 1 safari version&quot;
          ]
      }
  }
  </code></pre>
  <p>I have tried already <code>npm install --legacy-peer-deps</code> and <code>npm install --force</code> none of which changed the error message. I also tried <code>npm install --legacy-peer-deps --save google-maps-react</code> to see if I had to perform this individually for each package, no luck. I am aware that this error is relatively common, and it has something to do with the npm version and the <strong>dreaded breaking changes</strong>.</p>
  <p>Does anyone know any other steps I can take?</p>