执行npm install时遇antd依赖冲突及连接超时问题求助

我的Node版本为16.13.0，执行npm install时出现以下依赖冲突错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: isomorphic@4.0.2
npm ERR! Found: antd@4.24.12
npm ERR! node_modules/antd
npm ERR! antd@"^4.16.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer antd@"^5.0.1" from @ant-design/compatible@5.1.1
npm ERR! node_modules/@ant-design/compatible
npm ERR! @ant-design/compatible@"^5.1.1" 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 install --force命令后，出现套接字连接超时错误，调整超时时间也未解决。我的package.json内容如下：

{
  "dependencies": {
    "@ant-design/compatible": "^5.1.1",
    "@glidejs/glide": "^3.4.1",
    "@redq/js-info-bubble": "^0.8.1",
    "@uppy/core": "^1.13.2",
    "@uppy/dropbox": "^1.4.14",
    "@uppy/google-drive": "^1.5.14",
    "@uppy/instagram": "^1.4.14",
    "@uppy/react": "^1.10.6",
    "@uppy/tus": "^1.7.6",
    "antd": "^4.16.12",
    "antd-local-icon": "^0.1.3",
    "auth0-lock": "^12.0.2",
    "card-react": "^1.2.7",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "clone": "^2.1.2",
    "d3-shape": "^2.0.0",
    "enzyme-adapter-react-16": "^1.15.4",
    "enzyme-react-intl": "^2.0.6",
    "express": "^4.17.1",
    "firebase": "^9.22.0",
    "formik": "^2.2.9",
    "frappe-charts": "^1.6.2",
    "fuse.js": "^6.4.1",
    "globalize": "^1.6.0",
    "google-maps-react": "^2.0.6",
    "history": "^5.0.0",
    "js-rich-marker": "^1.1.2",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.25",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.20",
    "moment": "^2.27.0",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-addons-shallow-compare": "^15.6.2",
    "react-beautiful-dnd": "^13.0.0",
    "react-big-calendar": "^0.27.0",
    "react-chartjs-2": "^2.10.0",
    "react-codemirror": "^1.0.0",
    "react-count-down": "^1.2.1",
    "react-credit-cards": "^0.8.3",
    "react-custom-scrollbars": "^4.2.1",
    "react-dates": "^21.8.0",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^17.0.2",
    "react-drawer": "^1.3.4",
    "react-dropzone-component": "^3.2.0",
    "react-element-resize": "^0.2.3",
    "react-error-overlay": "^6.0.7",
    "react-flexbox-grid": "^2.1.2",
    "react-flip-move": "^3.0.4",
    "react-google-charts": "^3.0.15",
    "react-google-recaptcha": "^2.1.0",
    "react-grid-layout": "^1.1.1",
    "react-icons": "^3.11.0",
    "react-id-swiper": "3.0.0",
    "react-instantsearch": "^6.39.1",
    "react-intl": "^5.8.1",
    "react-loadable": "^5.5.0",
    "react-motion-drawer": "^3.1.0",
    "react-perfect-scrollbar": "^1.5.8",
    "react-placeholder": "^4.0.3",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "react-sidebar": "^3.0.2",
    "react-speech-recognition": "^3.2.3",
    "react-tag-input": "^6.4.3",
    "react-throttle": "^0.3.0",
    "react-trend": "^1.2.5",
    "react-vis": "^1.11.7",
    "react-youtube": "^7.12.0",
    "recharts": "^1.8.5",
    "redux": "^4.0.5",
    "redux-devtools": "^3.7.0",
    "redux-devtools-dock-monitor": "^1.2.0",
    "redux-devtools-log-monitor": "^2.1.0",
    "redux-saga": "^1.1.3",
    "redux-saga-firebase": "^0.15.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "rheostat": "^4.1.1",
    "rich-marker": "^0.0.1",
    "styled-components": "^5.2.0",
    "styled-theme": "^0.3.3",
    "swiper": "^9.3.1"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^1.0.0",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.5.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",
    "prettier": "^2.3.2",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.6",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4",
    "sass": "^1.43.2"
  }
}

我是React新手，希望能解决这个问题。

第一步：解决依赖冲突 #

错误核心是@ant-design/compatible@5.1.1要求antd版本至少为^5.0.1，但当前使用的是antd@^4.16.12，版本不匹配。提供两种解决思路：

思路1：降级@ant-design/compatible到适配antd v4的版本 #

@ant-design/compatible的v4版本专门适配antd v4，修改package.json中的依赖：

"@ant-design/compatible": "^4.24.12",

修改后，删除node_modules文件夹和package-lock.json文件，再执行npm install。

思路2：升级antd到v5版本 #

如果项目允许升级antd，修改package.json中的antd版本：

"antd": "^5.0.1",

同样删除node_modules和package-lock.json后执行npm install。注意antd v5存在部分API变更，可能需要调整项目中的代码。

第二步：解决连接超时问题 #

如果执行npm install仍超时，尝试以下方法：

• 用--legacy-peer-deps替代--force：执行npm install --legacy-peer-deps，该参数会忽略peer依赖冲突，且比--force更温和，减少潜在问题。
• 切换npm镜像源：执行npm config set registry https://registry.npmmirror.com/，使用国内镜像源提升下载速度，避免超时。
• 清理npm缓存：执行npm cache clean --force，清除缓存后再重新安装。

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