执行npm run preview后出现react-router-dom模块解析错误求助

运行npm run preview后出现以下错误：

Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../".

App.jsx 代码 #

import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom'
import { Contact } from './components/Contact'
import { Feature } from './components/Feature'
import { Navigation } from './components/Navigation'
import { Pricing } from './components/Pricing'
import { BlogHost } from "./components/BlogHost"

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<Navigation />}>
      <Route path='/BlogHost' element={<BlogHost />} />
      <Route path='/Feature' element={<Feature />} />
      <Route path='/Pricing' element={<Pricing />} />
      <Route path='/Contact' element={<Contact />} />
    </Route>
  )
)


const App = () => {
  return (
    <div className='box-border '>
    <RouterProvider router={router} />
    </div>
  )
}

export default App 

vite.config.js 代码 #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ['@headlessui/react', 'react-router-dom', '@heroicons/react/24/outline'],
    }
  }
})

解决方案 #

错误原因：你在vite.config.js的build.rollupOptions.external中，将react-router-dom标记为外部依赖。这会让Vite在构建时跳过该依赖的打包，导致浏览器运行时无法找到这个模块，从而抛出解析错误。

解决步骤：

1. 编辑vite.config.js，移除external数组中的react-router-dom（如果项目中实际用到了@headlessui/react和@heroicons/react/24/outline，同样需要从external中移除）
2. 重新执行npm run build完成构建
3. 再次运行npm run preview即可正常访问

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