Netlify部署React网站时npm install出现ERESOLVE依赖解析错误如何解决

你项目中使用的 webpack@5.x 与 optimize-css-assets-webpack-plugin@6.0.1 存在版本兼容冲突：该版本的css优化插件仅声明支持webpack@^4.0.0，而npm 7及以上版本会严格校验对等依赖的版本匹配规则，因此安装过程直接抛出ERESOLVE错误中断执行。

按优先级从高到低推荐以下三种解决方式：

• 方案1：替换为webpack5兼容的css优化插件（最推荐）
  optimize-css-assets-webpack-plugin 针对webpack5已经停止维护，官方推荐使用 css-minimizer-webpack-plugin 替代，操作步骤如下：
  1. 卸载旧插件：npm uninstall optimize-css-assets-webpack-plugin
  2. 安装新插件：npm install css-minimizer-webpack-plugin --save-dev
  3. 将webpack配置中所有对旧插件的引用替换为新插件即可，二者配置语法基本一致，无需额外修改逻辑。
• 方案2：绕过对等依赖校验（适合快速部署）
  不需要修改项目代码，仅需调整npm安装规则即可完成部署，两种实现方式二选一：
  1. 进入Netlify控制台的项目构建设置，将默认的安装命令修改为 npm install --legacy-peer-deps
  2. 在项目根目录新增 .npmrc 文件，写入内容 legacy-peer-deps=true，提交到代码仓库后重新触发部署即可
• 方案3：降级webpack到4.x版本（不推荐）
  仅当项目其他依赖强依赖webpack4时选择该方案：
  1. 卸载现有webpack5：npm uninstall webpack
  2. 安装webpack4版本：npm install webpack@4.x --save-dev

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