如何在React的Vite项目中使用Bit，避免'defaultExports is not a function'错误？

Bit完全支持Vite，该报错并非Vite专属，核心原因多为组件导出/导入不匹配、Vite配置未适配Bit组件，或TypeScript配置冲突。以下是具体排查与修复方案：

1. 核对组件导出与导入方式 #

报错defaultExports is not a function通常源于预览器期望默认导出为函数组件，但实际导入的导出类型不匹配：

• 若组件为默认导出：

  // 组件源码
  export default MyComponent;
  

  导入时需对应使用默认导入：

  import MyComponent from '@your-scope/my-component';
  

• 若为命名导出，则必须使用命名导入：

  // 组件源码
  export const MyComponent = () => { /* ... */ };
  

  导入时：

  import { MyComponent } from '@your-scope/my-component';
  

2. 配置Vite适配Bit组件解析 #

Vite与Webpack（create-react-app使用的构建工具）模块解析逻辑存在差异，需在vite.config.js/ts中添加适配规则：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    // 确保Bit组件的包路径可被正确解析
    alias: {
      '@your-scope': './node_modules/@your-scope'
    },
    // 扩展可解析的文件后缀，覆盖Bit组件可能的导出格式
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  },
  optimizeDeps: {
    // 强制预构建Bit组件，避免运行时解析异常
    include: ['@your-scope/my-component']
  }
});

3. 统一TypeScript配置（若使用TS） #

确保Vite项目与Bit组件的tsconfig.json配置兼容：

• 两者compilerOptions.module统一设为ESNext或ES2020，避免模块导出格式冲突
• 开启allowSyntheticDefaultImports与esModuleInterop，兼容默认导入与命名导入：

  {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "module": "ESNext",
      "target": "ES2020"
    }
  }
  

4. 验证Bit组件构建产物 #

检查node_modules/@your-scope/my-component下的package.json，确认main/module字段指向的文件导出格式正确：

{
  "main": "./dist/index.js",
  "module": "./dist/index.esm.js"
}

直接查看对应文件的导出代码，确保与导入方式匹配。

5. 更新依赖版本 #

旧版本的Bit或Vite插件可能存在兼容性bug，更新至最新稳定版：

# 更新Bit
bit update
# 更新Vite及React插件
npm update vite @vitejs/plugin-react

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