在Visual Studio中安装react-router-dom依赖时npm报错求助

问题描述 #

在Create React App项目中执行npm安装依赖时遭遇ERESOLVE错误，已尝试删除重装node_modules文件夹、使用管理员权限安装，问题依旧。

控制台错误输出 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @nt/xps-base-app@1.5.5
npm ERR! Found: react-router-dom@5.2.0
npm ERR! node_modules/react-router-dom
npm ERR!   react-router-dom@"^5.2.0" from the root project
npm ERR!   peer react-router-dom@">=5.1.0" from @okta/okta-react@4.1.0
npm ERR!   node_modules/@okta/okta-react
npm ERR!     @okta/okta-react@"^4.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-router-dom@"5.1.2" from @nt/xps-base-app@1.5.5
npm ERR! node_modules/@nt/xps-base-app
npm ERR!   @nt/xps-base-app@"^1.5.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-router-dom@5.1.2
npm ERR! node_modules/react-router-dom
npm ERR!   peer react-router-dom@"5.1.2" from @nt/xps-base-app@1.5.5
npm ERR!   node_modules/@nt/xps-base-app
npm ERR!     @nt/xps-base-app@"^1.5.4" from the root project

项目package.json依赖配置 #

"dependencies": {
        "@nt/eslint-config-xps-base": "^1.6.4",
        "@nt/xps-base-app": "^1.5.4",
        "@okta/okta-auth-js": "4.6.1",
        "@okta/okta-react": "^4.1.0",
        "@reduxjs/toolkit": "^1.6.1",
        "@types/text-encoding": "^0.0.35",
        "axios": "^0.21.1",
        "eslint": "5.15.1",
        "jest-junit": "6.4.0",
        "moment": "2.24.0",
        "prop-types": "15.7.2",
        "react": "^17.0.1",
        "react-axe": "3.3.0",
        "react-cookie": "^4.0.3",
        "react-dom": "^17.0.1",
        "react-media": "2.0.0-rc.1",
        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-with-direction": "1.3.1",
        "retry-axios": "^2.4.0",
        "semantic-ui-react": "^2.0.3",
        "uuid": "^3.4.0",
        "react-scripts": "^4.0.1",
        "semantic-ui-css": "^2.4.1",
        "xps-react": "1.7.0",
        "xps-style": "1.7.0"
    },
    "devDependencies": {
        "@nt/xps-dev-utils": "^1.6.2",
        "cross-env": "^7.0.3",
        "react-hot-loader": "^4.13.0",
        "text-encoding": "^0.7.0"
    }

解决方案 #

1. 锁定react-router-dom版本至5.1.2 #

• 修改package.json中react-router-dom的依赖为："react-router-dom": "5.1.2"
• 执行命令：npm install
• 说明：@nt/xps-base-app@1.5.5明确要求peer依赖为react-router-dom@5.1.2，而@okta/okta-react@4.1.0仅要求版本>=5.1.0，锁定至5.1.2可同时满足两个依赖的要求，从根源解决冲突。

2. 使用npm兼容模式跳过peer依赖检查（临时方案） #

• 执行命令：npm install --legacy-peer-deps
• 说明：该参数会让npm采用v6版本的依赖解析逻辑，忽略peer依赖冲突。适合快速解决问题，但不建议长期使用，可能隐藏潜在的依赖兼容风险。

3. 升级@nt/xps-base-app至兼容react-router-dom^5.2.0的版本 #

• 查看@nt/xps-base-app的版本更新记录，确认是否存在支持react-router-dom 5.2.0的新版本
• 若存在，修改package.json中@nt/xps-base-app的版本为对应兼容版本，再执行npm install
• 说明：这是更合理的长期解决方案，能让项目使用较新的依赖版本，同时避免冲突。

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