无法在Vercel部署React项目：依赖版本冲突问题

问题描述 #

在Vercel部署React项目时执行npm install出现以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.0
npm ERR! Found: typescript@5.1.6
npm ERR! node_modules/typescript
npm ERR!   typescript@"^5.1.6" from the root project
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.0
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.0
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.0" from react-scripts@5.0.0
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.0" from the root project
npm ERR!   1 more (tsutils)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.0
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.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! 
npm ERR! For a full report see:
npm ERR! /vercel/.npm/_logs/2023-07-21T06_32_03_053Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2023-07-21T06_32_03_053Z-debug-0.log
Error: Command "npm install" exited with 1

已尝试删除node_modules和package-lock.json但问题未解决。

问题根源 #

react-scripts@5.0.0的peer依赖明确要求TypeScript版本范围是^3.2.1 || ^4，而项目中安装的TypeScript@5.1.6超出了这个范围，导致npm的依赖解析器无法解决冲突。

解决方案 #

方案1：降级TypeScript到兼容版本 #

• 打开项目根目录的package.json，将typescript的版本修改为"typescript": "^4.9.5"（错误提示中推荐的兼容版本）
• 执行npm install重新安装依赖
• 提交修改后的package.json到代码仓库，重新触发Vercel部署

方案2：启用legacy-peer-deps跳过peer依赖检查 #

如果不想降级TypeScript，可以让npm忽略peer依赖冲突：

• 在项目根目录创建.npmrc文件，添加内容：

  legacy-peer-deps=true
  

• 提交.npmrc文件到仓库，重新部署Vercel
• 或者在Vercel项目的构建设置中，将构建命令修改为：npm install --legacy-peer-deps && npm run build

方案3：升级react-scripts到支持TypeScript 5的版本 #

react-scripts从5.0.1版本开始已经支持TypeScript 5，直接升级即可：

• 执行命令：npm install react-scripts@latest
• 提交更新后的package.json和package-lock.json到仓库，重新部署Vercel

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