React 16升级至React 18：Jenkins构建失败问题求助

架构老林

2026-7-25

React 16 升级至 React 18 后 npm install 依赖弃用警告排查与解决

环境信息

Node.js: v16.17.1
npm: 8.15.0
升级场景：React 16 → React 18
构建失败触发命令：npm install --legacy-peer-deps

项目 package.json 内容

{
  "name": "testprj",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-react": "^5.0.6",
    "axios": "^0.21.4",
    "bootstrap": "^4.1.3",
    "ckeditor5-build-classic-extended": "^20.0.1",
    "classnames": "^2.3.1",
    "dotenv": "^16.0.0",
    "env-cmd": "^10.1.0",
    "html-entities": "^2.3.3",
    "html-react-parser": "^3.0.4",
    "i": "^0.3.7",
    "jquery": "^3.4.1",
    "merge": "^1.2.1",
    "npm": "^8.18.0",
    "oidc-client": "^1.9.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.2.2",
    "react-dom": "^18.2.0",
    "react-html-parser": "^2.0.2",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
    "react-tabs": "^4.2.0",
    "react-xml-parser": "^1.1.8",
    "reactstrap": "^8.4.1",
    "rechoir": "^0.8.0",
    "rimraf": "^2.6.2",
    "shelljs": "^0.8.5",
    "shx": "^0.3.4",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build:dev": "env-cmd -f .env.dev react-scripts build && shx rm -rf build-dev && shx cp -r build build-dev",
    "build:sit": "env-cmd -f .env.sit react-scripts build && shx rm -rf build-sit && shx cp -r build build-sit",
    "build:qa": "env-cmd -f .env.qa react-scripts build && shx rm -rf build-qa && shx cp -r build build-qa",
    "build:uat": "env-cmd -f .env.uat react-scripts build && shx rm -rf build-uat && shx cp -r build build-uat",
    "build:prod": "env-cmd -f .env react-scripts build && shx rm -rf build-prod && shx cp -r build build-prod",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

执行 `npm install --legacy-peer-deps` 产生的弃用警告（中文翻译）

stable@0.1.8：现代JS已原生保证Array#sort()是稳定排序，该库已废弃
source-map-url@0.4.1：该包已废弃
flatten@1.0.3：建议使用lodash等工具库替代flatten
@hapi/bourne@1.3.2：此版本已废弃，不再维护
@hapi/topo@3.1.6：此版本已废弃，不再维护
request-promise-native@1.0.9：依赖的request包已废弃，因此该包也已废弃
urix@0.1.0：该包已废弃
har-validator@5.1.5：该库已停止维护
source-map-resolve@0.5.3：该包已废弃
chokidar@2.1.8：Chokidar 2自2019年起不再接收安全更新，建议升级到Chokidar 3
resolve-url@0.2.1：该包已废弃
w3c-hr-time@1.0.2：建议使用平台原生的performance.now()和performance.timeOrigin替代
left-pad@1.3.0：建议使用String.prototype.padStart()替代
sane@4.1.0：已修复部分依赖漏洞，不再支持Node <10，建议升级
@hapi/address@2.1.4：已迁移到@sideway/address
eslint-loader@3.0.3：已废弃，建议使用eslint-webpack-plugin替代
querystring@0.2.0：querystring API已被标记为Legacy，新项目建议使用URLSearchParams API
babel-eslint@10.1.0：已更名为@babel/eslint-parser，此包不再更新
html-webpack-plugin@4.0.0-beta.11：建议切换到稳定版本
uuid@3.4.0：建议升级到7.x及以上版本，旧版本在某些场景下使用Math.random()存在安全问题
request@2.88.2：request包已废弃
@hapi/hoek@8.5.1：此版本已废弃，不再维护
@hapi/joi@15.1.1：建议切换到joi包（无@hapi前缀）
svgo@1.3.2：此版本不再支持，建议升级到v2.x.x
popper.js@1.16.1：Popper v2已发布为@popperjs/core，此包仅维护旧版v1
core-js@2.6.12：core-js@<3.23.3已停止维护，存在大量问题，建议升级到最新版本

解决方案

1. 升级核心构建依赖 `react-scripts`

当前react-scripts@3.4.1版本过旧，不兼容React 18，建议升级到最新稳定版（v5.x）：

npm install react-scripts@latest --save

升级后会自动更新webpack、babel等底层依赖，解决大部分如html-webpack-plugin、chokidar、core-js的弃用问题。

2. 升级路由依赖

react-router-dom@5.1.2与React 18存在兼容性问题，建议升级到v6.x：

npm install react-router-dom@latest react-router-bootstrap@latest --save

注意：v6版本API有较大变化，需要调整路由相关代码（比如Switch替换为Routes、useNavigate替代useHistory等）。

3. 替换已废弃的依赖

oidc-client：替换为维护活跃的oidc-client-ts（原项目的TypeScript重写版）：
```
npm uninstall oidc-client && npm install oidc-client-ts --save
```
popper.js：由于使用了react-bootstrap@2.x，它已依赖@popperjs/core，可直接卸载旧版：
```
npm uninstall popper.js
```

babel-eslint：替换为@babel/eslint-parser，同时升级ESLint相关依赖：

npm uninstall babel-eslint eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
npm install eslint @babel/eslint-parser eslint-config-react-app eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

4. 清理冗余/过时依赖

i@0.3.7：无实际用途，直接卸载：
```
npm uninstall i
```
merge@1.2.1：可使用ES6的Object.assign或lodash的merge替代，若项目中使用较少，可直接卸载并替换代码；若依赖较多，升级到维护版：
```
npm install merge@latest --save
```
rimraf@2.6.2：升级到最新版：
```
npm install rimraf@latest --save
```
shelljs@0.8.5：升级到最新版：
```
npm install shelljs@latest --save
```

5. 处理CKEditor兼容性

ckeditor5-build-classic-extended@20.0.1版本过旧，与@ckeditor/ckeditor5-react@5.0.6可能存在兼容性问题，建议升级到匹配版本：

npm install ckeditor5-build-classic-extended@latest @ckeditor/ckeditor5-react@latest --save

如果找不到兼容的扩展构建，可考虑使用官方CKEditor 5构建并自定义扩展。

6. 测试构建

完成依赖升级后，执行以下命令验证：

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps
npm run build:dev

若仍有警告，根据警告提示逐个处理剩余的间接依赖问题（部分警告来自深层依赖，需升级上层依赖才能解决）。

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

React 16升级至React 18：Jenkins构建失败问题求助

环境信息 #

项目 package.json 内容 #

执行 npm install --legacy-peer-deps 产生的弃用警告（中文翻译） #

解决方案 #

1. 升级核心构建依赖 react-scripts #

2. 升级路由依赖 #

3. 替换已废弃的依赖 #

4. 清理冗余/过时依赖 #

5. 处理CKEditor兼容性 #

6. 测试构建 #