使用Vite创建React项目执行npm run dev报错：找不到pages或app目录

这个错误是Next.js项目的路由校验逻辑抛出的，你用Vite创建React项目却出现该问题，大概率是项目模板选错、误引入Next.js依赖或配置被篡改导致的，按以下步骤排查修复：

1. 确认项目模板是否正确 #

Vite的标准React项目模板不会要求pages或app目录，如果你创建项目时选错了Next.js模板，直接重新创建正确的项目：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

2. 清理Next.js相关依赖与配置 #

如果项目是正确的Vite React模板，检查并移除Next.js相关内容：

• 打开package.json，若存在next依赖，执行卸载：

  npm uninstall next
  

• 删除项目根目录下的next.config.js（如果存在）
• 检查vite.config.js，确保没有引入Next.js相关插件或配置项

3. 恢复标准Vite React项目结构与入口 #

如果项目核心文件缺失，手动创建必要文件：

• 在src/目录下创建main.jsx：

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.jsx'
  import './index.css'
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
  

• 创建src/App.jsx：

  function App() {
    return (
      <div className="App">
        <h1>Hello Vite + React</h1>
      </div>
    )
  }
  
  export default App
  

• 确保根目录index.html中包含<div id="root"></div>节点

完成以上操作后，重新执行npm run dev即可启动本地服务。

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