Create React App部署Firebase时npm ci遇TypeScript依赖冲突错误

问题概述 #

纯JavaScript编写的React项目，本地执行npm install和npm run build均正常，但部署至Firebase时，因Firebase使用npm ci && npm run build命令构建，触发ERESOLVE依赖冲突：react-scripts@5.0.1要求peerOptional typescript@"^3.2.1 || ^4"，但项目依赖中i18next@24.2.1等包引入了typescript@5.7.3，版本不兼容导致构建失败。

错误详情 #

npm ci        
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: react-scripts@5.0.1
npm error Found: typescript@5.7.3
npm error node_modules/typescript
npm error   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm error   node_modules/fork-ts-checker-webpack-plugin
npm error     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm error     node_modules/react-dev-utils
npm error       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm error       node_modules/react-scripts
npm error         react-scripts@"5.0.1" from the root project
npm error   peerOptional typescript@"^5" from i18next@24.2.1
npm error   node_modules/i18next
npm error     i18next@"^24.2.1" from the root project
npm error     peer i18next@">= 23.2.3" from react-i18next@15.4.0
npm error     node_modules/react-i18next
npm error       react-i18next@"^15.4.0" from the root project
npm error   1 more (tsutils)
npm error
npm error Could not resolve dependency:
npm error peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm error node_modules/react-scripts
npm error   react-scripts@"5.0.1" from the root project
npm error
npm error Conflicting peer dependency: typescript@4.9.5
npm error node_modules/typescript
npm error   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm error   node_modules/react-scripts
npm error     react-scripts@"5.0.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\user\AppData\Local\npm-cache\_logs\2025-01-28T21_20_08_713Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\user\AppData\Local\npm-cache\_logs\2025-01-28T21_20_08_713Z-debug-0.log

项目package.json #

{
  "name": "casagrande-rental",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-spring/web": "^9.7.5",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^14.6.1",
    "date-fns": "^4.1.0",
    "emailjs-com": "^3.2.0",
    "framer-motion": "^12.0.3",
    "i18next": "^24.2.1",
    "i18next-browser-languagedetector": "^8.0.2",
    "leaflet": "^1.9.4",
    "react": "^18.3.1",
    "react-burger-menu": "^3.1.0",
    "react-datepicker": "^7.6.0",
    "react-dom": "^18.3.1",
    "react-i18next": "^15.4.0",
    "react-icons": "^5.4.0",
    "react-leaflet": "^4.2.1",
    "react-navigation": "^5.0.0",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^7.1.3",
    "react-scripts": "5.0.1",
    "react-spring": "^9.7.5",
    "react-switch": "^7.1.0",
    "react-use-measure": "^2.1.1",
    "styled-components": "^6.1.14",
    "sweetalert2": "^11.15.10",
    "web-vitals": "^4.2.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"
    ]
  }
}

已尝试方案 #

• 卸载TypeScript并安装低版本
• 删除node_modules后执行npm outdated更新依赖
• 尝试迁移至Vite但工作量过大

解决方案建议 #

方案1：修改Firebase构建命令，添加--legacy-peer-deps参数 #

npm ci默认严格校验peer依赖，而--legacy-peer-deps会忽略peer依赖冲突（适合纯JS项目，无需TypeScript功能）。

• 修改Firebase的构建命令为：npm ci --legacy-peer-deps && npm run build
• 若使用firebase.json配置，添加如下内容：

  {
    "hosting": {
      "predeploy": ["npm ci --legacy-peer-deps && npm run build"]
    }
  }
  

方案2：显式锁定TypeScript版本为react-scripts兼容的4.x版本 #

在package.json中显式声明typescript@^4.9.5（react-scripts要求的最高兼容版本），覆盖i18next引入的peerOptional依赖：

1. 执行命令：npm install typescript@4.9.5 --save-dev
2. 提交更新后的package.json和package-lock.json至仓库
3. 重新触发Firebase构建

方案3：降级i18next至兼容TypeScript 4.x的版本 #

i18next@24.x要求typescript@^5，降级至23.x版本可避免该peer依赖要求：

1. 执行命令：npm install i18next@^23.7.11 react-i18next@^14.1.2
2. 验证本地构建正常后提交代码，重新部署至Firebase

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