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,