Next.js项目Vercel部署npm install失败，依赖冲突求助

问题描述 #

基于Next.js开发的项目此前持续正常部署数周，今日在Vercel上突然部署失败，出现依赖解析冲突报错。

报错日志 #

Cloning github.com/ThiagoC0STA/kfk (Branch: main, Commit: f69b855)
Cloning completed: 1.077s
Looking up build cache...
Build Cache not found
Running "vercel build"
Vercel CLI 28.2.2
Installing dependencies...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-elastic-carousel@0.11.5
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@"^17.0.2 || ^18.0.0-0" from next@12.2.5
npm ERR!   node_modules/next
npm ERR!     next@"12.2.5" from the root project
npm ERR!   5 more (react-dom, react-slick, styled-components, styled-jsx, use-sync-external-store)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15 - 17" from react-elastic-carousel@0.11.5
npm ERR! node_modules/react-elastic-carousel
npm ERR!   react-elastic-carousel@"^0.11.5" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"15 - 17" from react-elastic-carousel@0.11.5
npm ERR!   node_modules/react-elastic-carousel
npm ERR!     react-elastic-carousel@"^0.11.5" 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 /vercel/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2022-09-12T18_11_25_601Z-debug-0.log
Error: Command "npm install" exited with 1

项目package.json内容 #

{
  "name": "kfk",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "next-images": "^1.8.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-elastic-carousel": "^0.11.5",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^2.0.7",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

原因分析 #

• 核心冲突：react-elastic-carousel@0.11.5的peer依赖明确要求React版本范围为15-17，但项目中使用的是React 18.2.0，二者版本不兼容
• 此前部署成功的原因：Vercel的构建缓存保留了旧的依赖安装结果，今日缓存失效（日志显示Build Cache not found），触发全新依赖安装，导致隐藏的版本冲突暴露

解决方案 #

方案1：升级react-elastic-carousel到兼容React 18的版本 #

该包的v0.12.0及以上版本已支持React 18，修改package.json中的依赖版本：

"react-elastic-carousel": "^0.12.0"

提交修改后的代码到仓库，触发Vercel重新部署即可。

方案2：启用npm legacy peer依赖模式 #

在Vercel项目设置中调整构建命令，强制忽略peer依赖冲突：

1. 进入Vercel项目的「Settings」→「Build & Development Settings」
2. 将「Build Command」修改为：npm install --legacy-peer-deps && npm run build
   此方法可快速解决部署问题，但可能存在潜在兼容性风险，建议优先采用方案1。

方案3：降级React到17.x版本 #

修改package.json中的React相关版本：

"react": "17.0.2",
"react-dom": "17.0.2"

同时确认项目中其他依赖（如next@12.2.5）兼容React 17，此为退阶方案，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Thiago Rodrigues da Costa