安装React Router Dom v7.0.2后出现模块解析错误：无法从'react-router'加载'./dom'

你提到已经在项目中安装了最新版的react-router-dom（package.json中显示版本为"react-router-dom": "^7.0.2"），并编写了基础的路由配置代码，但遇到了Parcel打包工具的模块解析错误：

@parcel/core: Failed to resolve 'react-router/dom' from './node_modules/react-router-dom/dist/index.mjs'
D:\Namsthe\node_modules\react-router-dom\dist\index.mjs:13:48
12 | // index.ts
13 | import { HydratedRouter, RouterProvider } from "react-router/dom";
| ^^^^^^^^^^^^^^^^^^
@parcel/resolver-default: Cannot load file './dom' from module 'react-router'

结合你的代码和错误信息，我整理了几个针对性的解决方案：

首先澄清一个小细节：你执行npm -v react-router-dom显示10.9.0，这其实是npm本身的版本号，如果你想查看已安装的react-router-dom版本，正确的命令是npm list react-router-dom（本地安装版本）或npm view react-router-dom version（npm仓库最新版本）。

解决方案1：修复依赖版本不匹配问题 #

React Router Dom v7必须依赖同大版本的React Router核心库，可能安装过程中出现了缓存或版本不一致的情况：

1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
2. 重新执行依赖安装：

   npm install
   

如果无效，可以手动指定版本安装匹配的依赖对：

npm install react-router@^7.0.2 react-router-dom@^7.0.2

解决方案2：更新Parcel打包工具版本 #

较旧的Parcel版本可能对React Router v7的ES模块导入逻辑兼容性不足，建议更新到最新稳定版：

npm install parcel@latest --save-dev

同时检查你的Parcel配置文件（如.parcelrc），确保没有禁用ES模块的解析规则。

解决方案3：暂时降级到稳定的React Router v6版本 #

React Router v7属于较新的版本，生态兼容性可能还不够完善。如果上面的方法都无效，可以暂时降级到经过广泛验证的v6.x稳定版本，该版本的API和你当前的代码完全兼容，不需要修改业务逻辑：

npm uninstall react-router react-router-dom
npm install react-router-dom@6.22.3

小语法修正（不影响当前错误，但避免潜在问题） #

你的代码中createBrowserRouter的调用多了一个不必要的空格，虽然不会导致模块解析错误，但保持语法规范更稳妥：

// 原代码
const appRouter= createBrowserRouter ([
// 修正后
const appRouter= createBrowserRouter([
  { path: "/", element: <AppLayout /> },
  { path: "about", element: <About /> },
])

你可以优先尝试重新安装依赖的方案，这是解决这类模块解析问题最常见且有效的手段，如果无效再尝试降级或更新Parcel。

备注：内容来源于stack exchange，提问作者Shanu k k