React.js导入react-router-dom时无法解析'resolve-pathname'和'value-equal'

我在用React.js搭建电商网站时，导入react-router-dom出现以下错误：

ERROR in ./node_modules/history/esm/history.js 2:0-47 Module not found: Error: Can't resolve 'resolve-pathname' in '/home/usr/my-app/node_modules/history/esm'
ERROR in ./node_modules/history/esm/history.js 3:0-37 Module not found: Error: Can't resolve 'value-equal' in '/home/usr/my-app/node_modules/history/esm'

webpack compiled with 2 errors and 1 warning

最初有17个错误，折腾几小时装了些随机包后只剩这两个，现在卡壳了。

我的package.json内容：

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "react-icons-kit": "^2.0.0",
        "react-icons": "^4.8.0",
        "web-vitals": "^2.1.4",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.3.4",
        /* 我安装的用于减少错误的随机包 */
        "history": "^4.10.1",
        "source-map-loader": "^4.0.1",
        "tiny-invariant": "^1.3.1",
        "tiny-warning": "^1.0.3",
        "hoist-non-react-statics": "^3.3.2"
    },
    "devDependencies": {
        "tailwindcss": "^3.3.1"
    },
    "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"
        ]
    }
}

App.js代码：

import { React } from 'react'
import { Header } from './components/Header'
import { Body } from './components/Body'
import { Footer } from './components/Footer'
import { Switch } from "react-router-dom";

/* 不仅是Switch，导入任何模块都会出现相同错误 */

function App() {
    return (
        <div>
            <Header />
            <Body />
            <Footer />
        </div>
    );
}

export default App;

补充说明：

• 注释掉import { Switch } from "react-router-dom"后网站能正常运行
• package.json里列出的所有包都在node_modules目录中
• 已经试过删除node_modules重新npm i、重启服务器、npm cache clean --force，均无效

解决步骤 #

1. 卸载冲突的手动安装包 #

你手动安装的history@4.10.1可能和react-router-dom@5.3.4依赖的history版本冲突，先卸载这些多余包：

npm uninstall history source-map-loader tiny-invariant tiny-warning hoist-non-react-statics

2. 安装缺失的依赖 #

错误提示找不到的resolve-pathname和value-equal是history的依赖包，直接安装：

npm install resolve-pathname value-equal

3. 重新安装路由依赖（可选） #

如果上述步骤无效，卸载并重新安装路由相关包，确保版本匹配：

npm uninstall react-router react-router-dom
npm install react-router@5.2.0 react-router-dom@5.3.4

4. 彻底清理缓存后重建 #

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm start

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