求助：旧React项目运行报错'MemoryRouter'未从'react-router'导出

问题现象 #

• 旧React项目在同环境新建其他应用后启动异常
• 报错触发文件：./node_modules/react-router-dom/esm/react-router-dom.js
• 核心报错文本：Attempted import error: 'MemoryRouter' is not exported from 'react-router'
• 项目现有业务代码中的路由导入语句：

import {
BrowserRouter, Router,
} from "react-router-dom";

报错根因 #

• 本质是react-router 主包与 react-router-dom 包版本不兼容
• react-router 生态中，react-router-dom 是基于 react-router 主包做的浏览器环境封装，二者是强绑定的依赖关系。当安装依赖时出现版本错配（比如包管理器自动拉取了和项目原有 react-router-dom 版本不匹配的 react-router 主包），就会触发内部模块的导出校验失败
• 该报错来自 react-router-dom 内部代码的导入逻辑，和业务代码中书写的 BrowserRouter、Router 导入语句没有直接关联，不需要修改业务侧的导入代码即可解决

解决步骤 #

• 第一步：排查当前项目的路由相关依赖版本
  在项目根目录执行命令：
  npm ls react-router react-router-dom
  查看两个包的实际安装版本是否匹配
• 第二步：统一安装版本对齐的兼容组合包
  • 若项目为基于v5版本开发的旧项目，直接安装配对的v5稳定版即可，避免拉取不兼容的新版本：
    npm install react-router-dom@5.3.0 react-router@5.3.0 --save
  • 若计划升级到v6及以上版本，统一安装匹配的最新稳定版：
    npm install react-router-dom@latest react-router@latest --save
• 第三步：清理残留的旧依赖缓存后重启项目
  • 删除项目目录下的 node_modules 文件夹和包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
  • 重新执行 npm install 拉取对齐版本的依赖
  • 启动项目验证报错是否消除

注意事项 #

• 不要单独安装/升级 react-router-dom，必须同步匹配 react-router 主包的版本，二者版本错位是这类导入报错的最高发原因
• 如果使用pnpm作为包管理器，可额外执行 pnpm store prune 清理全局不匹配的缓存版本，避免后续安装再次出现错配

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