使用Rollup构建React组件库时出现'React is not defined'错误

问题诊断 #

出现该错误的核心原因是组件库打包产物未正确处理React JSX的运行时依赖，或是Rollup配置未正确声明全局变量映射，导致消费项目无法解析React引用。结合你的配置文件，以下是针对性的修复方案：

具体修复步骤 #

1. 补充JSX运行时依赖 #

当使用@babel/preset-react的runtime: "automatic"模式时，必须安装@babel/runtime-react-jsx作为生产依赖，它负责提供自动导入JSX运行时的支持：

npm install @babel/runtime-react-jsx --save

执行后你的package.json的dependencies会自动新增该包，确保打包产物能正确引入JSX运行时。

2. 修正Rollup的globals配置 #

你当前将globals放在Rollup配置根节点，需要移到每个output对象中（不同输出格式需单独配置全局变量映射），同时补充CJS格式的导出规范：

// rollup.config.js
const config = {
  input: "src/index.js",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      globals: { react: "React" }, // 移至当前output节点
      exports: "named", // 明确CJS导出规范，避免导入歧义
      sourcemap: true // 配合sourcemaps插件，方便调试
    },
    {
      file: packageJson.module,
      format: "esm",
      globals: { react: "React" }, // 移至当前output节点
      sourcemap: true
    },
  ],
  // 其余配置保持不变
};

3. 确保消费项目安装React Peer依赖 #

由于你将React声明为peerDependencies，消费项目必须手动安装对应版本的React：

# 在消费项目终端执行
npm install react@^18.2.0

4. 优化Babel配置（可选） #

明确指定@babel/preset-react的importSource，确保运行时导入路径准确：

babel({
  presets: [
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
        importSource: "@babel/runtime-react-jsx" // 新增该行
      },
    ],
  ],
  // 其余Babel配置保持不变
}),

5. 重新打包测试 #

执行以下步骤重新构建并验证：

# 重新构建组件库
npm run rollup
# 生成tgz包
npm pack
# 在消费项目中重新安装
npm install path/to/your-package.tgz

验证标准 #

打包后检查dist文件夹内的产物，确认代码中存在类似import { jsx } from '@babel/runtime-react-jsx'的语句，而非依赖全局React对象。

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