如何解决ReactJS部署Vercel时的npm ERR! ERESOLVE依赖冲突问题

问题诊断 #

冲突根源很明确：你使用的react-notifications-menu@1.0.6要求peer依赖react@^15.0.0 || ^16.0.0，但项目依赖的是react@18.2.0，版本不匹配触发了ERESOLVE错误。Vercel部署时默认执行npm install，没法加--force或--legacy-peer-deps参数绕过，必须从依赖层面彻底修复。

可行解决方案 #

方案1：替换不兼容的依赖包（推荐） #

react-notifications-menu@1.0.6版本过于陈旧，已不支持React18，直接更换维护活跃、适配React18的通知组件：

• 卸载旧依赖：

  npm uninstall react-notifications-menu
  

• 安装替代组件（二选一即可）：

  # 功能全面的react-toastify
  npm install react-toastify
  # 轻量简洁的react-hot-toast
  npm install react-hot-toast
  

• 替换项目中react-notifications-menu的相关代码，适配新组件的API，本地测试功能正常后提交到GitHub。

方案2：用npm overrides强制兼容（适合不想换组件的场景） #

在项目根目录的package.json里添加overrides字段，强制让react-notifications-menu使用当前项目的React版本：

{
  "overrides": {
    "react-notifications-menu": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  }
}

执行npm install确认本地无错误，测试组件功能没问题后提交代码，重新触发Vercel部署。

注意：这种方法属于强制兼容，可能存在组件功能异常的风险，务必充分测试。

方案3：降级React到16.x版本（不推荐） #

如果必须保留react-notifications-menu，可以降级React版本适配：

• 卸载当前React：

  npm uninstall react react-dom
  

• 安装React16.x稳定版：

  npm install react@^16.14.0 react-dom@^16.14.0
  

• 更新react-scripts等相关依赖适配React16，本地测试所有功能正常后提交部署。

验证步骤 #

1. 本地执行npm install，确认没有ERESOLVE错误
2. 运行npm start测试项目所有功能，尤其是通知组件部分
3. 提交修改到GitHub仓库
4. 触发Vercel重新部署，检查是否成功完成

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