React项目部署Vercel失败，依赖冲突问题求助

错误日志 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.0
npm ERR! node_modules/react
npm ERR!   react@"^17.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.6
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.10.6" from the root project
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^11.10.6" from the root project
npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
npm ERR!   22 more (@emotion/styled, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.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/2023-04-23T19_05_45_098Z-debug-0.log
Error: Command "npm install" exited with 1

项目package.json内容 #

{
  "name": "popsocket",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.1",
    "@mui/styles": "^5.12.0",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.6",
    "classnames": "^2.3.2",
    "formik": "^2.2.9",
    "json-server": "^0.17.3",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.1.2",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.10",
    "web-vitals": "^2.1.4",
    "yup": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

问题根源 #

@testing-library/react@13.4.0的peer依赖明确要求React版本为^18.0.0，但当前项目使用的是React17.0.0，版本不匹配导致npm安装时触发依赖冲突。

解决方案 #

方案1：降级测试库版本适配React17 #

将@testing-library/react和@testing-library/user-event降级到支持React17的稳定版本：

• @testing-library/react 降级至 ^12.1.5（兼容React17的最新版）
• @testing-library/user-event 降级至 ^14.4.3（对应兼容版本）

修改后的package.json依赖片段：

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.4.3",

本地执行npm install确认依赖可正常安装后，重新推送代码至Vercel触发部署。

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

若不想调整依赖版本，可修改Vercel的安装命令以忽略peer依赖冲突：

1. 进入Vercel项目的「Settings」→「Build & Development Settings」
2. 在「Install Command」输入框中填写 npm install --legacy-peer-deps
3. 保存设置后重新触发部署

注意：此方式会跳过peer依赖兼容性检查，可能存在潜在运行风险，优先推荐方案1。

内容的提问来源于stack exchange，提问作者Hiếu Nguyễn