ReferenceError: $RefreshSig$ is not defined while running with webpack-dev-server

Our webpack configuration matches the readme. No other options passed to the plugin. The main difference is devServer writeToDisk: true option as we have a PHP backend which servers builded files. Single file entry.

"scripts": {
  "dev-server": "webpack-dev-server --watch --mode development --hot",
  "dev": "webpack --watch --mode development"
}

When we run npm run dev-server, the compilation step finishes without a problem:

[1] multi (webpack)-dev-server/client?http://localhost:5000 (webpack)/hot/dev-server.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ErrorOverlayEntry.js ./app/index 76 bytes {main} [built]

But we face the fatal error in a browser afterwards:

sockjs.js:4533 Uncaught ReferenceError: $RefreshSig$ is not defined
    at setup (sockjs.js:4533)
    at Object.<anonymous> (sockjs.js:4506)
    at Object.55../common (sockjs.js:4519)
    at o (sockjs.js:41)
    at sockjs.js:43
    at Object.<anonymous> (sockjs.js:4094)
    at Object.52.debug (sockjs.js:4133)
    at o (sockjs.js:41)
    at sockjs.js:43
    at Object.<anonymous> (sockjs.js:3276)

And it looks like ReactRefreshEntry.js was never called.

If we run npm run dev which calls webpack directly, the compilation step finished successfully:

[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ErrorOverlayEntry.js ./app/index 52 bytes {main} [built]

And the browser console is clean and our app works fine. But the hot reload functionality is gone as there is no running dev server to get changes from.

RefreshReg, $RefreshSig$ and $RefreshSetup$ are now present under window object.

I have tried disabling everything, even the whole app/index.js file but without a success. My humble debugging suggests that ReactRefreshEntry is not called early enough. The chain goes like this:

webpack-dev-server/client/index.js → webpack-dev-server/client/socket.js → webpack-dev-server/client/clients/SockJSClient.js → sockjs-client/dist/sockjs.js → and finally setup(env) failing to call var _s = $RefreshSig$();

That’s where my abilities ends and wonders begin 😃

Can you point me in some direction what to check and how can I provide better feedback?

Thanks!

---

Versions:

• webpack: 4.43.0
• webpack-dev-server: 3.11.0
• @pmmmwh/react-refresh-webpack-plugin: 0.3.1
• react: 16.13.1
• react-tom: 16.13.1
• react-refresh: 0.8.2
• @babel/core: 7.9.6
• babel-loader: 8.1.0
• Chrome Canary

[pmmmwh]

My guess is that you’ve included the react-refresh/babel plugin to process node_modules. This will break because some code (as used by Webpack and WDS) will inevitably run before the plugin.

[pmmmwh]

I have recently introduced the plugin and have got the error only in production. The exclude setting is applied to my webpack.common.js and the plugin has to do nothing with my production config, so what’d be wrong here?

You probably need to exclude the react-refresh/babel plugin for your production build, or properly set NODE_ENV for the build process as well.