Vite偶现崩溃报错：模块未提供名为'default'的导出（React项目）

安全阿岳

2026-6-25

解决Vite偶发模块导出错误的问题

问题根源推测

缓存同步bug：Vite开发模式下的缓存偶尔会在文件变动时“卡壳”，导致模块导出的映射关系出错
路径/命名冲突：报错里提到的是ContactUs/Cards.jsx，但你的组件在marketing目录下，可能是重名文件或路径别名导致解析混乱
热更新(HMR)异常：Vite的热更新机制偶尔会在组件导出结构变更时，没能正确更新依赖链

修复步骤

1. 禁用Vite开发缓存

在vite.config.js中添加配置，强制跳过缓存，避免缓存不一致问题：

export default {
  server: {
    watch: {
      usePolling: true,
    },
  },
  optimizeDeps: {
    cache: false,
  },
}

2. 统一导出/导入逻辑

确认所有组件都存在default导出，比如Hero.jsx结尾需包含export default Hero;
通过index.jsx统一导出后，导入时严格使用命名导入，不要混合默认导入：
```
// 正确导入方式
import { Hero, About } from '../marketing';
```

3. 手动清理缓存目录

直接删除项目根目录下的node_modules/.vite文件夹，再重启Vite服务，彻底清除旧缓存文件。

4. 检查路径别名配置

如果项目使用了路径别名，确保vite.config.js中的resolve.alias配置没有混淆目录解析，示例：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});