CODEWITHSUNDEEP
reactjswebpackhot-reload
Rollin
Rollin

Reputation: 374

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

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()

Upvotes: 4

Views: 9713

Answers (5)

vukovicluka
vukovicluka

Reputation: 211

If you are geeting this error while setting up NX with rspack for React, the problem is that NX template is currently generating incorrect rspack.config.js file.

Generated config file:

const { composePlugins, withNx, withWeb } = require('@nx/rspack');
module.exports = composePlugins(withNx(), withWeb(), (config) => {
  return config;
});

Workaround config

const { composePlugins, withNx, withReact } = require('@nx/rspack');
module.exports = composePlugins(withNx(), withReact(), (config) => {
  return config;
});

There is an open issue on Github: https://github.com/nrwl/nx/issues/29673

Upvotes: 0

Adil Akothiat
Adil Akothiat

Reputation: 79

In my React application, I use @pmmmwh/react-refresh-webpack-plugin and react-refresh to stop my app from refreshing every time I make a change or update my code. I set up my webpack.config.js to use these two packages, and it functions well.

/* This is a part of my webpack config */
const webpack = require("webpack");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
require("dotenv").config();

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
               loader: "babel-loader",
               options: {
                          plugins:[require("react-refresh/babel")]
                        },
             },
      },
    ]
  },
  plugins: [
    new ReactRefreshWebpackPlugin()
  ]
}

When I build my App in production I got that error $RefreshSig$ is not defined. Here's the solution: I change my configuration to just use these two packages in development.

/* This is a part of my webpack config */
const webpack = require("webpack");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
require("dotenv").config();

const mode = process.env.WEBPACK_SERVE ? 'development' : 'production';

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          plugins: mode === 'production' ? [] : [require("react-refresh/babel")]
        },
      },
    }, ]
  },
  plugins: [
    ...(mode === 'production' [] : [new ReactRefreshWebpackPlugin()])
  ]
}
I hope my solution was useful.

Upvotes: 0

Nam Le
Nam Le

Reputation: 329

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),
          },
        },
      },
...

Upvotes: 2

Wang Wendy
Wang Wendy

Reputation: 76

According to react-refresh-webpack-plugin docs,You should use plugin ReactRefreshWebpackPlugin,not webpack.HotModuleReplacementPlugin.

plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),

Upvotes: 1

Octavio Tosta
Octavio Tosta

Reputation: 11

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. :)

Upvotes: 1

Related Questions