Error: "Hot Module Replacement (HMR) is not enabled!"

I’m getting this error:

[React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.

I’m using electron-forge to drive the webpack config, and it uses webpack-dev-server with hot: true internally. Apparently, there’s a kind of an init ordering issue, but react-refresh-webpack-plugin wrongly detects that hot reload is not enables.

A simple demonstration of the incorrectness of this behavior is adding new webpack.HotModuleReplacementPlugin() makes the error go away and the page to load, but upon the refresh the typical stack overflow error caused by two instances of hot reload plugin running occurs.

Our setup worked correctly before the update, this seems like a bug. It would be great to have an option to opt-out of this check entirely.

Unfortunately, disabling hot at the webpack-dev-server end is not an option for us, since it’s under control of the electron-forge.

Webpack we’re using is v4. Version 0.3.3 works, version 0.4.1 has this issue.

[silkfire]

I got it to work. For some reason I had accidentally removed const webpackHotMiddleware = require('webpack-hot-middleware') as I thought it part of the react-hot-loader package, which I in fact was replacing.

Perhaps the guide could state the importance of enabling HMR, as I did not get it to work by just blindly following it?

webpack.config.js (dev)

const webpack = require('webpack');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

...

entry: {
    app: ['webpack-hot-middleware/client'],
},

...

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshPlugin(),
],

[pmmmwh]

I was debating to either use forceEnable as a way to suppress checks, or just add a forceSuppressErrors flag. Maybe we could go with the latter then.