This web page requires JavaScript to be enabled.

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

How to enable JavaScript?

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

Blog June 6, 2022 0

While using Babel transform and the webpack hot reload middleware approach, and after build the project in PROD mode, an uncaught ReferenceError: $RefreshSig$ is not defined error thrown in console.

Per react-refresh-webpack-plugin docs :

Ensure both the Babel transform (react-refresh/babel) and this plugin are enabled only in development mode!

and the packages:

  • "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
  • "react-refresh": "^0.11.0",
  • "webpack": "5.66.0",

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

Nam Le – https://nready.net/?p=1335,


Last modified on February 9th, 2023 at 10:41 pm

Nam Le
lequocnam



0 responds

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.