执行npm run dev报错无法加载/src/main.jsx，页面空白求助

• 核对文件路径与大小写
  确认src/main.jsx文件真实存在，且文件名大小写和代码中的引用完全一致（Linux/macOS系统对文件名大小写敏感，Windows不敏感），避免出现Main.jsx或main.js这类拼写错误。

• 检查项目构建工具配置

  • 如果使用Vite：打开vite.config.js，确认root字段指向项目根目录，同时resolve.extensions包含.jsx（默认配置通常已包含，但可手动添加确保）：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
      resolve: {
        extensions: ['.mjs', '.js', '.jsx', '.json']
      }
    })
    

  • 如果使用Webpack：检查webpack.config.js中的entry路径是否正确指向./src/main.jsx，同时resolve.extensions添加.jsx。

• 验证依赖文件存在性
  确认main.jsx中导入的./App（对应App.jsx）和./index.css文件都存在于src目录下，缺失依赖文件可能导致入口文件解析失败，报错信息可能误指向入口文件本身。

• 清除构建缓存

  • Vite项目：删除node_modules/.vite缓存文件夹，重新执行npm run dev。
  • Webpack项目：删除dist目录及缓存文件，再重启开发服务。

• 确认依赖版本与插件安装

  • 检查package.json中react和react-dom版本是否为React 18+（因为代码中使用了ReactDOM.createRoot），版本过低会导致API不兼容。
  • Vite项目需确保已安装@vitejs/plugin-react插件，若未安装可执行：

    npm install @vitejs/plugin-react --save-dev
    

• 检查项目目录结构
  确认main.jsx直接位于项目根目录下的src文件夹中，而非嵌套在src的子目录（如src/src/main.jsx），避免路径解析错误。

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