使用Vite构建React项目时无法解析react-router-dom依赖

云原生阿岚

2026-7-13

[vite]: Rollup failed to resolve import "react-router-dom" from "C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/src/App.jsx"
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
error during build:
Error: [vite]: Rollup failed to resolve import "react-router-dom" from "C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/src/App.jsx"
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
at onRollupWarning (file:///C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:44792:19)
at onwarn (file:///C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:44562:13)
at Object.onwarn (file:///C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/node_modules/rollup/dist/es/shared/node-entry.js:25097:13)
at ModuleLoader.handleInvalidResolvedId (file:///C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/node_modules/rollup/dist/es/shared/node-entry.js:23779:26)
at file:///C:/Users/Usuario/Documents/Portfolio/my_portfolio/portfolio/node_modules/rollup/dist/es/shared/node-entry.js:23739:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)

解决Vite构建时Rollup无法解析react-router-dom的问题

按以下步骤逐一排查：

确认react-router-dom依赖是否安装
终端执行安装命令：
```
npm install react-router-dom
```
若之前已安装但报错未解决，清理依赖缓存后重新安装：
```
rm -rf node_modules package-lock.json
npm install
```
检查App.jsx中的导入语句
确保导入路径拼写完全正确，无大小写错误或多余字符，标准导入格式示例：
```
import { BrowserRouter, Routes, Route } from "react-router-dom";
```

排查Vite配置的外部依赖设置
打开vite.config.js，查看build.rollupOptions.external配置项，如果其中包含react-router-dom，将其移除。示例修正：

// 错误配置
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react-router-dom'] // 移除这一项
    }
  }
})

// 修正后配置
export default defineConfig({
  build: {
    rollupOptions: {
      // 移除react-router-dom的external配置
    }
  }
})

完成以上操作后，重新执行npm run build即可解决该问题。

内容的提问来源于stack exchange，提问作者Jesus Martinez Lopez