使用Babel打包模块时React依赖未引入导致运行报错

问题描述 #

我用Babel打包模块时遇到React依赖问题。React某版本开始支持无需显式导入React就能写JSX，我的格式化工具会自动移除多余的React导入，在webpack构建里一切正常，但用Babel生成dist文件夹时，编译后的代码里出现了React.createElement调用，却没有导入React，直接导致运行时崩溃。

编译后出问题的代码示例：

var colored = function colored(text, color) {
  return text != null && /*#__PURE__*/React.createElement("span", {
    className: "color-".concat(color)
  }, text);
};

我的Babel配置文件（babel-build.config.json）：

{
  "presets": [
    [
      "react-app",
      {
        "absoluteRuntime": false
      }
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@": "./src"
        }
      }
    ],
    [
      "babel-plugin-transform-remove-imports",
      {
        "test": "\\.(css|scss)$"
      }
    ],
    [
      "@babel/plugin-transform-typescript",
      {
        "allowDeclareFields": true
      }
    ]
  ]
}

执行的打包命令：

NODE_ENV=production babel src --out-dir dist --copy-files --extensions ".ts,.tsx" --config-file ./babel-build.config.json

解决方案 #

1. 开启React预设的自动Runtime模式 #

React 17+的JSX转换支持runtime: "automatic"配置，开启后Babel会自动注入react/jsx-runtime的依赖，不再生成依赖全局React变量的React.createElement调用。修改你的Babel配置：

{
  "presets": [
    [
      "react-app",
      {
        "absoluteRuntime": false,
        "runtime": "automatic" // 新增此配置项
      }
    ]
  ],
  // 其他插件配置保持不变
}

开启后，JSX会被编译为_jsx/_jsxs调用，Babel会自动添加必要的导入语句，无需手动引入React。

2. 若需保留React.createElement（不推荐） #

如果因特殊原因无法使用自动Runtime模式，需要确保每个使用JSX的文件顶部都保留React导入：

import React from 'react';

同时调整你的格式化工具规则，禁止移除React的导入语句。

3. 确认依赖版本兼容性 #

确保你安装的@babel/preset-react或react-app预设版本支持runtime配置（需对应React 17+版本），如果版本过低，执行以下命令升级依赖：

npm update @babel/preset-react react-scripts

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