React refresh webpack plugin throws $RefreshSig$ is not defined error

Question

I'm using webpack-hot-middleware approach and after setup I get uncaught ReferenceError: $RefreshSig$ is not defined error thrown in console.

webpack.config.js looks like this:

for modules:

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

and above it I create ant plugin instance:

new webpack.HotModuleReplacementPlugin()

Answer 1

This is my solution:

const mode = process.env.WEBPACK_SERVE ? 'development' : 'production';
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript'],
            plugins: ['@babel/plugin-transform-runtime', mode!='production' && require.resolve('react-refresh/babel')].filter(Boolean),
          },
        },
      },
...

Answer 2

If you followed the github.com/pmmmwh/react-refresh-webpack-plugin docs, Probably your error is in const isDevelopment = process.env.NODE_ENV !== 'production';.

Check where you are doing this logic. Make sure you have the env vars defined where you call process.env.NODE_ENV.

In my case, I put this logic inside webpack config, because I recieve env from CLI.

My build script:

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

My webpack.config file looks like:

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'),
      },
    },
    ],
  };
};

My plugin ReactRefreshWebpackPlugin is separeted in another webpack, exclusive for dev. So, I decide to put the plugin only in webpack.dev.conf without if to verify the environment, but if you follow the docs and be careful with env vars, will work.

I hope this helps you. :)