React.js项目无法部署至Vercel，请求协助排查

问题概述 #

进入React客户端目录后执行vercel命令部署到Vercel，部署失败，报错：

Error: Command "npm install" exited with 1

项目的package.json内容：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@auth0/auth0-react": "^2.0.1",
    "@react-google-maps/api": "^2.18.1",
    "@reduxjs/toolkit": "^1.9.3",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.5",
    "bootstrap": "^5.2.3",
    "card-js": "^1.0.13",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-credit-cards": "^0.8.3",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-redux": "^8.0.5",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5"
  }
}

Vercel构建日志：

[11:47:38.390] Running build in San Francisco, USA (West) – sfo1
[11:47:38.451] Retrieving list of deployment files...
[11:47:38.726] Previous build caches not available
[11:47:38.788] Downloading 65 deployment files...
[11:47:41.902] Running "vercel build"
[11:47:42.468] Vercel CLI 28.18.5
[11:47:43.174] Installing dependencies...
[11:47:45.438] npm ERR! code ERESOLVE
[11:47:45.442] npm ERR! ERESOLVE could not resolve
[11:47:45.443] npm ERR! 
[11:47:45.443] npm ERR! While resolving: react-credit-cards@0.8.3
[11:47:45.443] npm ERR! Found: react@18.2.0
[11:47:45.443] npm ERR! node_modules/react
[11:47:45.444] npm ERR!   react@"^18.2.0" from the root project
[11:47:45.444] npm ERR!   peer react@"^16.11.0 || ^17 || ^18" from @auth0/auth0-react@2.0.1
[11:47:45.444] npm ERR!   node_modules/@auth0/auth0-react
[11:47:45.444] npm ERR!     @auth0/auth0-react@"^2.0.1" from the root project
[11:47:45.444] npm ERR!   19 more (@react-aria/ssr, @react-google-maps/api, ...)
[11:47:45.445] npm ERR! Could not resolve dependency:
[11:47:45.445] npm ERR! peer react@"^15.0.0 || ^16.0.0" from react-credit-cards@0.8.3
[11:47:45.445] npm ERR! node_modules/react-credit-cards
[11:47:45.445] npm ERR!   react-credit-cards@"^0.8.3" from the root project
[11:47:45.445] npm ERR! 
[11:47:45.445] npm ERR! Conflicting peer dependency: react@16.14.0
[11:47:45.445] npm ERR! node_modules/react
[11:47:45.446] npm ERR!   peer react@"^15.0.0 || ^16.0.0" from react-credit-cards@0.8.3
[11:47:45.446] npm ERR!   node_modules/react-credit-cards
[11:47:45.446] npm ERR!     react-credit-cards@"^0.8.3" from the root project
[11:47:45.446] npm ERR! 
[11:47:45.446] npm ERR! Fix the upstream dependency conflict, or retry
[11:47:45.446] npm ERR! this command with --force, or --legacy-peer-deps
[11:47:45.446] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[11:47:45.446] npm ERR! 
[11:47:45.446] npm ERR! See /vercel/.npm/eresolve-report.txt for a full report.
[11:47:45.447] 
[11:47:45.447] npm ERR! A complete log of this run can be found in:
[11:47:45.447] npm ERR!     /vercel/.npm/_logs/2023-04-24T18_47_43_516Z-debug-0.log
[11:47:45.469] Error: Command "npm install" exited with 1
[11:47:45.742] Deployment completed
[11:47:45.694] BUILD_UTILS_SPAWN_1: Command "npm install" exited with 1

问题原因 #

react-credit-cards@0.8.3的peer依赖仅支持React 15.x或16.x版本，但当前项目使用的是React 18.2.0，npm的依赖解析器无法解决这个冲突，导致npm install失败。

解决方案 #

方案1：替换为兼容React 18的替代包（推荐） #

react-credit-cards-2是原包的维护分支，支持React 17和18版本：

1. 卸载旧包：

   npm uninstall react-credit-cards
   

2. 安装替代包：

   npm install react-credit-cards-2
   

3. 修改项目中组件的引入路径，将：

   import CreditCard from 'react-credit-cards';
   

   替换为：

   import CreditCard from 'react-credit-cards-2';
   

方案2：忽略peer依赖冲突（临时方案） #

通过配置让npm跳过peer依赖检查：

• 方法1：在项目根目录创建.npmrc文件，添加以下内容：

  legacy-peer-deps=true
  

  提交该文件到仓库，Vercel构建时会自动应用此配置。
• 方法2：在Vercel项目设置中，修改构建命令为：

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

方案3：降级React版本（不推荐） #

将React版本降级到16.x以匹配react-credit-cards的要求：

npm install react@^16.14.0 react-dom@^16.14.0

注意：此方案可能导致其他依赖出现兼容问题，需要全面测试项目功能。

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