从CRA迁移到Vite时出现模块找不到错误的求助

可能的原因及修复步骤 #

• 重新安装依赖并清理缓存
  依赖安装不完整或缓存冲突是常见诱因，执行以下命令彻底重置依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 确认Vite及插件版本正确
  确保package.json的devDependencies中包含正确的Vite和React插件版本，比如：

  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.9"
  }
  

  若版本不对，直接重新安装：

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

• 不要修改Vite内部文件
  手动注释cli.js里的import 'esbuild'属于错误操作，会破坏Vite的依赖结构。如果已经修改，重新安装Vite即可恢复原文件。
• 检查vite.config.jsx配置
  确保配置文件正确引入React插件，示例配置：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
  })
  

• 验证文件扩展名与入口引用
  确认所有原.js文件已改为.jsx，同时根目录index.html中的入口脚本路径要对应正确文件名：

  <script type="module" src="/src/index.jsx"></script>
  

额外排查点 #

• 若使用pnpm/yarn出现问题，切换回npm安装依赖，避免包管理器兼容性冲突。
• 检查项目根目录是否包含特殊字符或中文路径，这类路径可能导致模块解析失败。

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