React 刷新 webpack 插件抛出 $RefreshSig$ is not defined 错误答案

【问题标题】：React refresh webpack plugin throws $RefreshSig$ is not defined errorReact 刷新 webpack 插件抛出 $RefreshSig$ is not defined 错误
【发布时间】：2022-04-12 11:41:59
【问题描述】：

我正在使用 webpack-hot-middleware 方法，设置后我得到 uncaught ReferenceError: $RefreshSig$ is not defined 控制台中抛出的错误。

webpack.config.js 看起来像这样：

对于模块：

    {
      test: 'ts',
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            plugins: [buildMode === 'development' && require.resolve('react-refresh/babel')].filter(Boolean),
          },
        },
      ],
    },

在它之上我创建了 ant 插件实例：

new webpack.HotModuleReplacementPlugin()

【问题讨论】：

您需要与 test、exclude 等处于同一级别的第二个插件键。如果缺少，那么我相信您会收到此错误。你可以在这里看到我在文档中的意思github.com/pmmmwh/react-refresh-webpack-plugin

标签： reactjs webpack hot-reload

【解决方案1】：

如果您遵循github.com/pmmmwh/react-refresh-webpack-plugin 文档，您的错误可能在const isDevelopment = process.env.NODE_ENV !== 'production';。

检查您在哪里执行此逻辑。确保在调用process.env.NODE_ENV 的位置定义了env vars。

就我而言，我将这个逻辑放在webpack 配置中，因为我从CLI 收到env。

我的构建脚本：

"build:prd": "webpack --config webpack.prod.config.js --env NODE_ENV=production"

我的webpack.config 文件如下所示：

module.exports = (env) => {
  const isDevelopment = env.NODE_ENV !== 'production';

  const babelOptions = {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-runtime',
      isDevelopment && require.resolve('react-refresh/babel'),
    ].filter(Boolean),
  };

  return {
    entry: './src/index.tsx',
    rules: [
        {
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: babelOptions,
            },
            {
              loader: 'ts-loader',
            },
          ],
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: babelOptions,
          },
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
      alias: {
        '@utils': path.resolve(__dirname, './src/utils'),
      },
    },
    ],
  };
};

我的插件ReactRefreshWebpackPlugin 被分隔在另一个 webpack 中，仅供开发人员使用。所以，我决定只将插件放在webpack.dev.conf 中而不使用if 来验证环境，但是如果你按照文档并小心env vars，就可以了。

我希望这对你有帮助。 :)

【讨论】：