npm install依赖冲突求助：extract-text-webpack-plugin与Webpack版本不兼容

问题背景 #

作为React和Webpack新手，此前配置正常，安装部分包后出现npm install错误，尝试--legacy-peer-deps参数无法解决。

错误详情 #

While resolving: extract-text-webpack-plugin@3.0.2
npm ERR! Found: webpack@5.74.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.74.0" from the root project
npm ERR!   peer webpack@">=4.43.0 <6.0.0" from @pmmmwh/react-refresh-webpack-plugin@0.5.8
npm ERR!   node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!     @pmmmwh/react-refresh-webpack-plugin@"^0.5.3" from @storybook/react@6.5.12
npm ERR!     node_modules/@storybook/react
npm ERR!       dev @storybook/react@"^6.5.12" from the root project
npm ERR!   25 more (@storybook/builder-webpack5, @storybook/core, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^3.1.0" from extract-text-webpack-plugin@3.0.2
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR!   dev extract-text-webpack-plugin@"^3.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@3.12.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^3.1.0" from extract-text-webpack-plugin@3.0.2
npm ERR!   node_modules/extract-text-webpack-plugin
npm ERR!     dev extract-text-webpack-plugin@"^3.0.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/user/.npm/eresolve-report.txt for a full report.

当前package.json配置 #

"devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-typescript": "^7.18.6",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/builder-webpack5": "^6.5.12",
    "@storybook/manager-webpack5": "^6.5.12",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.12",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/dom": "^8.18.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "12",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.0.2",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "@types/react-transition-group": "^4.4.5",
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^29.0.3",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.4",
    "cz-conventional-changelog": "3.3.0",
    "eslint": "^7.22.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-react": "^7.31.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^6.2.4",
    "html-webpack-plugin": "^5.3.1",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
    "less": "^4.1.1",
    "less-loader": "8.1.1",
    "mini-css-extract-plugin": "^1.5.0",
    "react-hot-loader": "^4.13.0",
    "react-test-renderer": "^18.2.0",
    "resolve-url-loader": "2.3.1",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "style-loader": "^2.0.0",
    "ts-jest": "^29.0.1",
    "ts-loader": "^9.1.0",
    "typescript": "^4.8.3",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "@types/node-sass": "^4.11.3",
    "adjust-sourcemap-loader": "1.2.0",
    "axios": "^0.27.2",
    "classnames": "^2.3.2",
    "css-modules-typescript-loader": "^4.0.1",
    "eslint-plugin-padding": "^0.0.4",
    "image-webpack-loader": "^8.1.0",
    "node-sass": "^7.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-transition-group": "^4.4.5",
    "ts-node": "^10.9.1",
    "typescript-css-modules": "^1.0.4"
  },

解决方案 #

核心问题 #

extract-text-webpack-plugin@3.0.2仅支持Webpack 3，而当前项目使用Webpack 5，直接导致依赖冲突。该插件已被官方废弃，Webpack 4+推荐使用你已安装的mini-css-extract-plugin。

具体步骤 #

1. 移除冲突插件
   执行命令卸载：

   npm uninstall extract-text-webpack-plugin --save-dev
   

   或直接在package.json的devDependencies中删除"extract-text-webpack-plugin": "^3.0.2"。

2. 替换Webpack配置
   将配置文件中extract-text-webpack-plugin的用法替换为mini-css-extract-plugin：

   • 原用法示例：

     const ExtractTextPlugin = require('extract-text-webpack-plugin');
     module.exports = {
       module: {
         rules: [
           {
             test: /\.css$/,
             use: ExtractTextPlugin.extract({
               fallback: 'style-loader',
               use: 'css-loader'
             })
           }
         ]
       },
       plugins: [
         new ExtractTextPlugin('styles.css')
       ]
     };
     

   • 替换为：

     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     module.exports = {
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               MiniCssExtractPlugin.loader,
               'css-loader'
             ]
           }
         ]
       },
       plugins: [
         new MiniCssExtractPlugin({
           filename: 'styles.css'
         })
       ]
     };
     

3. 重新安装依赖
   执行：

   npm install
   

额外优化建议 #

• webpack-dev-server@3.11.2与Webpack 5兼容性有限，建议升级到兼容版本：

  npm install webpack-dev-server@^4.15.1 --save-dev
  

• css-loader@5.2.4版本较旧，建议升级到最新版：

  npm install css-loader@^6.8.1 --save-dev
  

内容的提问来源于stack exchange，提问作者Ivan