使用Vite搭建的React项目修改后刷新报错求助

1. 核对导出与导入的一致性 #

• 确保App.jsx使用默认导出：

  // App.jsx
  export default function App() {
    // 组件逻辑代码
  }
  

• 同时确认main.jsx的导入语句匹配默认导入：

  // main.jsx
  import App from './App.jsx'
  

  禁止混用默认导出（export default）和命名导出（export const App = ...）的导入方式。

2. 清理Vite缓存 #

• 热更新异常常由缓存旧模块导致，可通过两种方式清理：
  1. 在Vite开发服务器的命令行窗口按下c键清空缓存
  2. 删除项目根目录下的node_modules/.vite文件夹，再重启开发服务器

3. 检查Vite配置 #

• 确认热更新功能未被意外禁用：

  // vite.config.js
  export default {
    server: {
      hmr: true // 默认开启，确保该值为true
    }
  }
  

• 检查resolve配置是否包含.jsx后缀，避免模块解析失败：

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
  

4. 校验文件命名大小写 #

• 确保导入路径的文件名与实际文件大小写完全一致（比如App.jsx和app.jsx，Windows系统文件大小写不敏感，但Vite热更新会受此影响）

5. 升级Vite版本 #

• 旧版本Vite存在已知热更新bug，执行命令升级到最新稳定版：

  npm update vite
  

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