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

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

reactjs