react-refresh-webpack-plugin WDS-6 fix candidates

WDSSocket-failsafe.js

/**
 * Initializes a socket server for HMR for webpack-dev-server.
 * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
 * @returns {void}
 */
function initWDSSocket(messageHandler) {
  let SockJSClient;
  try {
      // that still produces compilation warning
      ({ default: SockJSClient } = require('webpack-dev-server/client/clients/SockJSClient'));
  } catch (e) {
      SockJSClient = undefined;
  }
  const { default: WebSocketClient } = require('webpack-dev-server/client/clients/WebSocketClient');
  const { client } = require('webpack-dev-server/client/socket');

  /** @type {WebSocket} */
  let connection;
  if (SockJSClient && client instanceof SockJSClient) {
    connection = client.sock;
  } else if (client instanceof WebSocketClient) {
    connection = client.client;
  } else {
    throw new Error('Failed to determine WDS client type');
  }

  connection.addEventListener('message', function onSocketMessage(message) {
    messageHandler(JSON.parse(message.data));
  });
}

module.exports = { init: initWDSSocket };

WDSSocket-no-types.js

/**
 * Initializes a socket server for HMR for webpack-dev-server.
 * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
 * @returns {void}
 */
function initWDSSocket(messageHandler) {
  const { client } = require('webpack-dev-server/client/socket');

  /** @type {WebSocket} */
  let connection;
  if (client && client.sock) {
    // SockJSClient exposes `.sock` (WDS < 6)
    connection = client.sock;
  } else if (client && client.client) {
    // WebSocketClient exposes `.client`
    connection = client.client;
  } else {
    throw new Error('Failed to determine WDS client type');
  }

  connection.addEventListener('message', function onSocketMessage(message) {
    messageHandler(JSON.parse(message.data));
  });
}

module.exports = { init: initWDSSocket };