title: can't install dependencies because of node and webpack version conflict
body: <p>I am trying to install the dependencies with the exact version which are listed in json file, and I got errors below:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR! 
  npm ERR! Found: webpack@4.46.0
  npm ERR! node_modules/webpack
  npm ERR!   webpack@"^4.35.3" from the root project
  npm ERR! 
  npm ERR! Could not resolve dependency:
  npm ERR! peer webpack@"^5.1.0" from terser-webpack-plugin@5.3.1
  npm ERR! node_modules/terser-webpack-plugin
  npm ERR!   dev terser-webpack-plugin@"^5.1.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.</code></pre>
  </div>
  </div>
  </p>
  <p>since the dependencies with the required version are not the latest one, I downgrade my node.js from latest version 16 to 14+, and install with npm i --leacy-peer-deps, but the error shows still the same, seems the version from node or webpack still not compatible to the dependencies(Found: webpack@4.46.0
  npm ERR! node_modules/webpack
  npm ERR!   webpack@&quot;^4.35.3&quot; from the root project).</p>
  <p>how can I solve this problem?</p>
  <p>here is the json list:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "example-project",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "node src/server/index.js",
      "build-prod": "webpack --config webpack.prod.js",
      "build-dev": "webpack-dev-server  --config webpack.dev.js --open"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "dependencies": {
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "jest-fetch-mock": "^3.0.3",
      "webpack": "^4.35.3",
      "webpack-cli": "^3.3.5"
    },
    "devDependencies": {
      "@babel/core": "^7.13.15",
      "@babel/plugin-transform-modules-commonjs": "^7.13.8",
      "@babel/preset-env": "^7.13.15",
      "babel-loader": "^8.2.2",
      "body-parser": "^1.19.0",
      "clean-webpack-plugin": "^3.0.0",
      "cors": "^2.8.5",
      "css-loader": "^5.2.1",
      "html-webpack-plugin": "^3.2.0",
      "jest": "^26.6.3",
      "mini-css-extract-plugin": "^1.4.1",
      "node-fetch": "^2.6.1",
      "node-sass": "^5.0.0",
      "optimize-css-assets-webpack-plugin": "^5.0.4",
      "sass": "^1.32.8",
      "sass-loader": "^10.1.1",
      "style-loader": "^2.0.0",
      "terser-webpack-plugin": "^5.1.1",
      "webpack-dev-server": "^3.11.2",
      "workbox-webpack-plugin": "^6.1.5"
    }
  }</code></pre>
  </div>
  </div>
  </p>