首次使用Rollup构建React组件库遇RollupError问题求助

核心问题分析 #

这个错误出现的原因有两个：

1. React的npm包采用CommonJS格式发布，而Rollup默认只处理ES模块，需要@rollup/plugin-commonjs转换才能识别其导出
2. 你的Rollup配置存在两处关键问题：
   • 处理源码的打包配置中未启用commonjs插件
   • 未将React声明为外部依赖，且output配置存在语法错误

具体修复步骤 #

1. 修正Rollup配置文件 #

替换原配置为以下内容，解决插件顺序、外部依赖和output语法问题：

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      // 输出CommonJS格式
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      // 输出ES模块格式
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      // 必须先处理CommonJS模块，再编译TypeScript
      commonjs({
        include: "./node_modules/**",
        // 显式映射React的default导出，兼容旧写法
        namedExports: {
          "node_modules/react/index.js": ["default", "React"],
        },
      }),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
    ],
    // 将React声明为外部依赖，不打包进组件库
    external: ["react"],
  },
  {
    // 直接从源码生成类型声明，避免依赖dist中间文件
    input: "src/index.ts",
    output: [
      {
        file: packageJson.types,
        format: "esm",
      },
    ],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
];

2. 修正package.json的types字段 #

原字段路径错误，改为：

"types": "dist/index.d.ts"

3. 优化Button组件的导入方式（可选但推荐） #

React 17+的JSX转换不再需要显式导入React，可简化代码：

interface ButtonProps {
  label: string;
}

const Button = (props: ButtonProps) => {
  return <button>{props.label}</button>;
};

export default Button;

如果坚持保留导入，建议使用命名导入格式：

import * as React from "react";

interface ButtonProps {
  label: string;
}

const Button = (props: ButtonProps) => {
  return <button>{props.label}</button>;
};

export default Button;

4. 确保tsconfig.json配置正确 #

添加或确认以下关键配置，支持JSX和类型声明生成：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

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