Webpack+React+Babel构建报错：Cannot use 'import.meta' outside a module

问题根源 #

你的Webpack配置中启用了ES模块输出（experiments.outputModule: true和output.module: true），但HtmlWebpackPlugin默认生成的<script>标签没有添加type="module"属性，浏览器会把输出的ES模块当成普通脚本执行，从而触发import.meta相关的语法错误。

解决方案 #

方案1：关闭ES模块输出（适合不需要ES模块的场景） #

修改webpack.config.js，移除ES模块相关配置：

module.exports = function (env) {
    // ... 其他代码
    return {
        mode: MODE,
        entry: paths.entry,
        // 移除ES模块实验配置
        // experiments: {
        //     outputModule: true,
        // },
        output: {
            filename: "[name].[contenthash].js",
            path: paths.build,
            clean: true,
            // 移除module输出设置
            // module: true
        },
        // ... 其他代码
    };
};

方案2：保留ES模块输出，给脚本添加type="module" #

修改HtmlWebpackPlugin的配置，添加scriptLoading: 'module'选项，让生成的script标签支持ES模块：

plugins: [
    new HtmlWebpackPlugin({
        template: paths.html,
        // 添加script加载类型配置
        scriptLoading: 'module'
    }),
    new webpack.ProgressPlugin()
],

额外检查 #

确保Babel配置不干扰Webpack的模块处理，可在babel-loader选项中明确设置@babel/preset-env的modules为false（Webpack 5会自行处理模块语法，无需Babel转换）：

use: {
    loader: 'babel-loader',
    options: {
        presets: [
            ["@babel/env", { modules: false }],
            "@babel/react"
        ],
    }
},

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