推送至Vercel时遭遇ERESOLVE依赖冲突问题求助

问题根源 #

你的项目使用react@17.0.2，但react-animated-burgers@1.2.8的peer依赖要求react@^16.13.1，版本不兼容触发ERESOLVE错误。本地用--legacy-peer-deps能绕过检查，但Vercel默认构建流程未启用该参数，因此部署时报错。

解决方案 #

1. 让Vercel使用--legacy-peer-deps安装依赖 #

直接在Vercel构建流程中添加该参数，两种实现方式：

• 修改package.json脚本：在package.json的scripts字段中新增安装命令：

  "scripts": {
    "install": "npm install --legacy-peer-deps",
    "build": "你的项目构建命令"
  }
  

• 修改Vercel构建命令：进入Vercel项目「Settings」→「Build & Development Settings」，将「Build Command」改为：

  npm install --legacy-peer-deps && npm run build
  

2. 使用npm Overrides强制兼容依赖 #

npm 8.3及以上版本支持overrides字段，可强制指定依赖版本，忽略其peer依赖限制。在package.json中添加：

"overrides": {
  "react-animated-burgers": {
    "react": "^17.0.2"
  }
}

添加后重新提交代码，Vercel构建时会自动应用该配置解决冲突。

3. 替换未维护的依赖包 #

react-animated-burgers最后更新停留在2020年，已无后续维护，长期存在兼容风险。可替换为维护活跃的同类组件，比如react-burger-menu：

1. 卸载旧依赖：

   npm uninstall react-animated-burgers
   

2. 安装新依赖：

   npm install react-burger-menu
   

3. 根据react-burger-menu官方文档调整组件代码即可。

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