如何解决React项目中的npm依赖冲突问题？

项目package.json配置 #

{
  "name": "reactjs",
  "version": "4.7.1",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@aspnet/signalr": "^1.1.4",
    "@craco/craco": "^5.6.2",
    "@fullcalendar/bootstrap": "^5.9.0",
    "@fullcalendar/core": "4.4.0",
    "@fullcalendar/daygrid": "^5.9.0",
    "@fullcalendar/interaction": "^5.9.0",
    "@fullcalendar/react": "^5.9.0",
    "@fullcalendar/timegrid": "4.4.2",
    "@types/d3-scale": "^4.0.2",
    "@types/react-bootstrap-table-next": "^4.0.18",
    "abp-web-resources": "^5.1.1",
    "antd": "^4.6.4",
    "apexcharts": "^3.35.2",
    "axios": "^0.19.0",
    "bootstrap": "^5.1.0",
    "classnames": "^2.2.6",
    "craco-antd": "^1.14.1",
    "d3-scale": "^4.0.2",
    "echarts": "^5.3.2",
    "echarts-for-react": "^3.0.2",
    "env-cmd": "^10.1.0",
    "famfamfam-flags": "^1.0.0",
    "formik": "^2.2.9",
    "highcharts": "^10.2.0",
    "highcharts-react-official": "^3.1.0",
    "lodash": "^4.17.15",
    "mobx": "^6.5.0",
    "mobx-react": "^7.4.0",
    "mobx-react-lite": "^3.4.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "query-string": "^6.9.0",
    "rc-slider": "^8.7.1",
    "rc-tooltip": "^4.0.0-alpha.3",
    "react": "^18.1.0",
    "react-apexcharts": "^1.4.0",
    "react-bootstrap": "^2.0.0-beta.6",
    "react-bootstrap-table-next": "^3.3.5",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.1",
    "react-bootstrap-table2-toolkit": "^2.1.1",
    "react-datepicker": "^2.11.0",
    "react-datetime": "^2.16.3",
    "react-document-title": "^2.0.3",
    "react-dom": "^18.1.0",
    "react-image-crop": "^9.0.3",
    "react-loadable": "^5.5.0",
    "react-notifications": "^1.4.3",
    "react-perfect-scrollbar": "^1.5.3",
    "react-quill": "^1.3.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.2.0",
    "react-select": "^5.3.2",
    "react-vis": "^1.11.7",
    "recharts": "^1.8.5",
    "sass": "^1.51.0",
    "sweetalert2": "^9.5.4",
    "sweetalert2-react": "^0.8.3",
    "yup": "^0.32.11"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "env-cmd -f .env.dev craco start",
    "start-local": "env-cmd -f .env.local craco start",
    "start-production": "env-cmd -f .env.production craco start",
    "build": "env-cmd -f .env.dev craco build",
    "build-local": "env-cmd -f .env.local craco build",
    "build-production": "env-cmd -f .env.production craco build",
    "lint": "eslint . --ext .ts,.tsx",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.9",
    "@types/jest": "^24.0.23",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.12",
    "@types/node": "^12.12.14",
    "@types/react": "^16.9.13",
    "@types/react-datepicker": "^4.4.1",
    "@types/react-document-title": "^2.0.3",
    "@types/react-dom": "^16.9.4",
    "@types/react-loadable": "^5.5.2",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-vis": "^1.11.11",
    "@types/recharts": "^1.8.3",
    "@typescript-eslint/eslint-plugin": "^4.0.1",
    "@typescript-eslint/parser": "^4.0.1",
    "copy-webpack-plugin": "^5.0.5",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^9.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jest": "^23.17.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "prettier": "^2.0.5",
    "ts-import-plugin": "^1.6.1",
    "typescript": "^3.7.2"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "@types/react": "16.3.0"
  }
}

已执行操作 #

• 使用yarn安装成功，但启动后出现报错
• 执行npm ci
• 执行npm i
• 执行npm i --force和npm i --legacy-peer-deps（安装成功，但启动报错）
• 在package.json中添加resolutions字段并尝试配置不同版本的react
• 删除package-lock.json、yarn.lock和node_modules后重新执行npm i或yarn

环境信息 #

• Node版本：14.15、16.17
• NPM版本：8.11.0
• 另一台Windows机器（Node 14.15 + npm 6）可正常启动项目

报错情况 #

1. 添加resolutions后：出现React类型定义不兼容报错，提示@types/react版本与项目依赖的React版本不匹配
2. 未添加resolutions时：出现大量peer依赖冲突报错，多个库要求的React版本范围不一致
3. 更新后新报错：出现模块导入错误，提示找不到某个模块的导出项

解决方案 #

1. 对齐React核心版本与类型定义 #

当前项目react/react-dom用的是18.x，但react-scripts@3.2.0不支持React18，且devDependencies里的@types/react是16.x，版本完全不兼容。优先降级React到16.x以匹配现有工具链：

• 修改dependencies中的react和react-dom为^16.14.0
• 删除resolutions字段中@types/react的强制配置，让其自动匹配React16的类型版本

2. 统一FullCalendar依赖版本 #

项目中@fullcalendar/core是4.4.0，但其他FullCalendar相关库（如@fullcalendar/daygrid、@fullcalendar/react）用的是5.x版本，跨大版本必然引发冲突。将所有FullCalendar依赖统一为4.x：

• 修改@fullcalendar/bootstrap、@fullcalendar/daygrid、@fullcalendar/interaction、@fullcalendar/react为^4.4.2，与@fullcalendar/core、@fullcalendar/timegrid版本保持一致

3. 降级不兼容的UI库 #

部分UI库依赖更高版本的React，需要降级到兼容React16的版本：

• react-bootstrap@2.0.0-beta.6依赖React17+，降级为^1.6.4
• react-select@5.3.2依赖React17+，降级为^3.2.0

4. 使用npm 6版本安装 #

npm 7+对peer依赖的检查更严格，而npm6的处理逻辑和可正常运行的环境一致，切换到npm6规避严格检查：

# 全局安装npm6
npm install -g npm@6
# 删除旧依赖文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install

5. 验证启动 #

完成上述修改后，执行启动命令：

npm run start

内容的提问来源于stack exchange，提问作者Александр Мерный