Uncaught TypeError: SocketClient is not a constructor

I have tried for a long time to get the React Refresh Webpack plugin working! I am using my own custom configuration for webpack, not create-react-app. When I was using the overlay of create-react-app it was working as expected:

process.env.NODE_ENV = "development";
process.env.BABEL_ENV = process.env.NODE_ENV;

const webpack = require("webpack");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

const webpackDevClientEntry = require.resolve(
  "react-dev-utils/webpackHotDevClient"
);

const reactRefreshOverlayEntry = require.resolve(
  "react-dev-utils/refreshOverlayInterop"
);

module.exports = merge(common, {
  mode: "development",
  devtool: "source-map",
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        entry: webpackDevClientEntry,
        module: reactRefreshOverlayEntry
      }
    })
  ]
});

But after using new ReactRefreshWebpackPlugin() without options, I got this error in the browser console, my terminal (webpack compilation) has no error…

`

[pmmmwh]

The solution is to get the urlParts from the configuration of webpack dev server client.webSocketURL option.

Support for this particular config would be added, maybe later this week, but is not there yet now. However you can override the options by using the overlay option of this plugin.

[MuhammadSawalhy]

I think I’ve found what causes this issue:

it should be:

function initWDSSocket(messageHandler, resourceQuery) {
  if (typeof __webpack_dev_server_client__ !== 'undefined') {
-    const SocketClient = __webpack_dev_server_client__;
+    const SocketClient = __webpack_dev_server_client__.default;

    const urlParts = getSocketUrlParts(resourceQuery);
    const connection = new SocketClient(url.format(urlParts));