使用Vite时npm包出现“No export named Button”错误

问题根源 #

你遇到的Uncaught SyntaxError: The requested module does not provide an export named 'Button'错误，核心原因是你的components-test包没有正确对外暴露Button组件的命名导出，或者包的入口配置有误，导致Vite无法识别到对应的导出项。

排查与修复步骤 #

1. 检查组件包的入口文件导出逻辑 #

打开组件包的源码入口文件（通常是src/index.ts），确认是否存在正确的命名导出：

// src/index.ts
export { Button } from './Button'; // 确保是命名导出，而非默认导出

如果Button组件本身的文件是默认导出（比如export default Button），则需要在入口文件中转成命名导出：

import Button from './Button';
export { Button };

2. 确认package.json的入口配置 #

检查组件包的package.json，确保main、module、types字段指向正确的编译后文件：

{
  "name": "components-test",
  "main": "./dist/components-test.cjs.js",
  "module": "./dist/components-test.es.js",
  "types": "./dist/index.d.ts",
  "type": "module" // 如果使用ES模块规范，需要添加这个字段
}

这些路径需要和你打包工具的输出路径一致，比如用Vite打包的话，对应build配置里的fileName设置。

3. 检查组件库的打包配置 #

如果用Vite构建组件库，确保vite.config.ts的lib配置正确生成包含命名导出的包：

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

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.ts', // 指向你的入口文件
      name: 'ComponentsTest',
      formats: ['es', 'cjs'], // 同时生成ES和CommonJS格式
      fileName: (format) => `components-test.${format}.js`
    },
    rollupOptions: {
      // 排除react和react-dom，避免打包进组件库
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  }
});

执行npm run build后，检查dist目录下的输出文件，确认其中包含export { Button }的语句。

4. 项目中正确使用组件 #

确保组件库发布/安装完成后，在项目中使用正确的命名导入：

import { Button } from 'components-test';

function MyComponent() {
  return <Button>test</Button>;
}

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