React项目（Vite构建）偶现"请求模块无default导出"报错求助

问题描述 #

开发过程中偶尔触发如下报错：

Uncaught SyntaxError: The requested module '/src/Components/App/HamburgerMenu.tsx?t=1683406454267' does not provide an export named 'default'

所有.tsx文件均已正确使用export default导出组件，且导入写法规范，但报错随机出现（多在保存文件时触发），无明确规律，多次保存或刷新页面后可自行恢复。

可行解决步骤 #

• 强制清理Vite缓存：
  手动删除项目根目录下的node_modules/.vite文件夹，或启动开发服务时添加--force参数：

  vite --force
  

  强制Vite重新构建所有模块，避免缓存引发的解析异常。

• 检查TypeScript配置：
  确保tsconfig.json的compilerOptions配置正确，避免模块解析冲突：

  {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "bundler",
      "esModuleInterop": true
    }
  }
  

• 验证文件路径大小写：
  即使系统不区分大小写，Vite的模块解析可能因缓存对大小写敏感。确保导入路径的大小写与实际文件名完全一致（比如../../Component需匹配实际文件的Component.tsx大小写）。

• 升级Vite到最新稳定版：
  部分旧版本Vite存在热模块替换（HMR）相关bug，执行命令升级：

  npm update vite
  # 或使用yarn
  yarn upgrade vite
  

• 调整编辑器保存设置：
  若使用自动保存功能，尝试改为手动保存，或调整编辑器的保存延迟，避免临时文件触发Vite的错误解析。

• 临时禁用HMR排查：
  在vite.config.ts中临时关闭HMR，验证是否为热更新导致的问题：

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

  若关闭后不再报错，说明是HMR特定场景bug，可等待Vite后续修复或提交issue反馈。

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