部署NextJS到Vercel时遭遇Peer Dependency依赖冲突错误求助

问题详情 #

将NextJS应用部署到Vercel时，部署阶段因npm依赖冲突失败，错误日志如下：

Previous build cache not available
Cloning completed: 426.52ms
Running "vercel build"
Vercel CLI 28.6.0
Installing dependencies...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-typed@1.2.0
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@"^18.2.0" from next@13.0.5
npm ERR!   node_modules/next
npm ERR!     next@"13.0.5" from the root project
npm ERR!   3 more (react-dom, react-icons, styled-jsx)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-typed@1.2.0
npm ERR! node_modules/react-typed
npm ERR!   react-typed@"^1.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.3.0" from react-typed@1.2.0
npm ERR!   node_modules/react-typed
npm ERR!     react-typed@"^1.2.0" 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-12-02T16_42_09_037Z-debug-0.log
Error: Command "npm install" exited with 1

本地执行npm run dev可正常运行，已尝试npm install --legacy-peer-deps但部署问题仍存在。

解决方案 #

1. 配置Vercel使用指定安装命令 #

Vercel默认执行npm install，需手动修改为兼容命令：

• 进入Vercel项目后台，打开Settings → General → Build & Development Settings
• 在Install Command输入框中填写 npm install --legacy-peer-deps
• 保存设置后重新触发部署

2. 升级react-typed到兼容React 18的版本 #

react-typed@1.2.0仅支持React 16，升级到最新版即可解决版本冲突：

npm install react-typed@latest --legacy-peer-deps

提交更新后的package.json和package-lock.json到Git仓库，再重新部署。

3. 重置本地依赖并提交锁文件 #

本地重新生成兼容的依赖锁文件，确保Vercel安装时使用正确的依赖树：

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

将新生成的package-lock.json推送到仓库后重新部署。

4. 切换包管理器（可选） #

若npm的peer依赖处理仍有问题，可改用pnpm或yarn：

• 安装pnpm并生成锁文件：

  npm install -g pnpm
  pnpm install
  

• 在Vercel项目设置中，将Install Command改为pnpm install，重新部署

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