React项目部署Vercel时依赖冲突的解决办法

问题分析 #

部署时Vercel执行npm install报错，核心冲突点：

npm ERR! Could not resolve dependency:
npm ERR! peer react@"<= 15.x.x" from react-show-more@1.1.1
npm ERR! node_modules/react-show-more
npm ERR! react-show-more@"^1.0.6" from the root project

但你的package.json中明明声明了react-show-more@^2.0.0，说明实际安装的版本和配置不一致——大概率是package-lock.json锁定了旧版本，导致Vercel安装时拉取了不兼容的1.1.1版本。

解决方案 #

方案1：修复依赖版本（推荐） #

1. 本地清理旧依赖文件：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

3. 检查package-lock.json中react-show-more的版本，确认是2.x系列（该版本已兼容React16+）
4. 将更新后的package-lock.json提交到GitHub，重新触发Vercel部署

方案2：让Vercel绕过peer依赖冲突 #

如果暂时不想调整依赖，可以直接让Vercel忽略peer依赖检查：

• 进入Vercel项目的Settings → Build & Development Settings
• 在Install Command输入框中填写：

  npm install --legacy-peer-deps
  

• 保存设置后重新触发部署

方案3：替换过时组件 #

如果react-show-more的2.x版本仍存在兼容问题，建议替换为维护更活跃的同类型组件，或自行实现“显示更多”功能，避免依赖长期未更新的库。

附：项目配置与错误日志 #

package.json内容 #

{
  "name": "movies",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.3",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.4",
    "@mui/styled-engine-sc": "^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.4.0",
    "bootstrap": "^5.3.0",
    "date-fns": "^2.30.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-icons": "^4.9.0",
    "react-redux": "^8.0.7",
    "react-router-dom": "^6.12.1",
    "react-scripts": "5.0.1",
    "react-scroll-horizontal": "^1.6.6",
    "react-show-more": "^2.0.0",
    "react-slick": "^0.29.0",
    "react-star-ratings": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.11",
    "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"
    ]
  }
}

部署错误日志 #

Running build in Cleveland, USA (East) – cle1
Cloning github.com/MansourMahmoud/React-Movies (Branch: master, Commit: d5274c3)
Previous build cache not available
Cloning completed: 523.223ms
Running "vercel build"
Vercel CLI 31.0.1
Installing dependencies...
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.8.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.0>
npm notice Run `npm install -g npm@9.8.0` to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: movies@0.1.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!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<= 15.x.x" from react-show-more@1.1.1
npm ERR! node_modules/react-show-more
npm ERR!   react-show-more@"^1.0.6" 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-12T00_20_03_830Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2023-07-12T00_20_03_830Z-debug-0.log
Error: Command "npm install" exited with 1

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