Babel设置target为Chrome54时react/jsx-runtime无jsx导出如何解决

错误根源 #

该报错核心是@babel/preset-env的模块转换逻辑和React JSX运行时的导出格式不匹配导致：
当target设置为Chrome 54时，preset-env会默认将ES模块语法转换为CommonJS语法，而react/jsx-runtime是标准ES模块导出，转换为CommonJS导入后映射不匹配，无法识别命名导出的jsx方法。Chrome 74已原生支持ES模块，preset-env不会转换模块语法，因此不会触发报错。

解决方案（按推荐优先级排序） #

方案1：关闭preset-env的模块转换（优先推荐） #

Chrome 54已原生支持ES模块语法，你可以直接在@babel/preset-env配置中添加modules: false关闭模块转换，无需修改其他逻辑，改动最小。
修改后的babel.config.js配置如下：

module.exports = {
    presets: [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3,
            "modules": false, // 新增此行，关闭ES模块转CommonJS
            "targets": {
                "chrome": "54"
            },
            "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-arrow-functions"]
        }],
        ["@babel/preset-react", {
            "runtime": "automatic"
        }]
    ]
}

方案2：新增插件补全CommonJS导出映射 #

如果你的项目有其他场景必须要将模块转换为CommonJS格式，可以安装插件补全导出映射：

1. 安装依赖：
   npm install babel-plugin-add-module-exports --save-dev
2. 修改babel.config.js添加插件配置：

module.exports = {
    presets: [
        // 原有preset配置保持不变
    ],
    plugins: ["add-module-exports"] // 新增此行
}

方案3：回退React preset的runtime模式 #

你也可以将@babel/preset-react的runtime从automatic改回classic模式，不过该方案需要你在所有包含JSX的文件顶部手动引入React，维护成本更高：

["@babel/preset-react", {
    "runtime": "classic"
}]

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