fix: do not use URLSearchParams to support IE 11 without polyfill

src/runtime/ErrorOverlayEntry.js

@@ -1,4 +1,4 @@
-/* global __resourceQuery, __react_refresh_error_overlay__, __react_refresh_init_socket__ */
+/* global __react_refresh_error_overlay__, __react_refresh_init_socket__ */
 
 const registerErrorEventHandlers = require('./errorEventHandlers');
 const formatWebpackErrors = require('./formatWebpackErrors');
@@ -67,16 +67,8 @@ function compileMessageHandler(message) {
   }
 }
 
-let overrides = {};
-if (__resourceQuery) {
-  const searchParams = new URLSearchParams(__resourceQuery.slice(1));
-  searchParams.forEach(function (value, key) {
-    overrides[key] = value;
-  });
-}
-
 // Registers handlers for compile errors
-__react_refresh_init_socket__(compileMessageHandler, overrides);
+__react_refresh_init_socket__(compileMessageHandler);
 // Registers handlers for runtime errors
 registerErrorEventHandlers.error(function handleError(error) {
   hasRuntimeErrors = true;

src/runtime/sockets/WDSSocket.js

@@ -2,23 +2,26 @@
 
 const url = require('native-url');
 
+const getResourceQuery = require('./utils/getResourceQuery');
+
 /**
  * Initializes a socket server for HMR for webpack-dev-server.
  * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
- * @param {*} overrides Socket integration overrides to change the connection URL.
  * @returns {void}
  */
-function initWDSSocket(messageHandler, overrides) {
+function initWDSSocket(messageHandler) {
   if (typeof __webpack_dev_server_client__ !== 'undefined') {
+    // Get config overrides from webpack __resourceQuery global
+    const query = getResourceQuery();
     const SocketClient = __webpack_dev_server_client__;
     // TODO: Support usage of custom sockets after WDS 4.0 is released
     // Ref: https://github.com/webpack/webpack-dev-server/pull/2055
     const connection = new SocketClient(
       url.format({
         protocol: window.location.protocol,
-        hostname: overrides.sockHost || window.location.hostname,
-        port: overrides.sockPort || window.location.port,
-        pathname: overrides.sockPath || '/sockjs-node',
+        hostname: query.sockHost || window.location.hostname,
+        port: query.sockPort || window.location.port,
+        pathname: query.sockPath || '/sockjs-node',
       })
     );
 

src/runtime/sockets/WHMEventSource.js

@@ -8,11 +8,9 @@ const singletonKey = '__webpack_hot_middleware_reporter__';
 /**
  * Initializes a socket server for HMR for webpack-hot-middleware.
  * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
- * @param {*} overrides Socket integration overrides to change the connection URL.
  * @returns {void}
  */
-// eslint-disable-next-line no-unused-vars
-function initWHMEventSource(messageHandler, overrides) {
+function initWHMEventSource(messageHandler) {
   const client = window[singletonKey] || require('webpack-hot-middleware/client');
 
   client.useCustomOverlay({

src/runtime/sockets/WPSSocket.js

@@ -3,11 +3,9 @@
 /**
  * Initializes a socket server for HMR for webpack-plugin-serve.
  * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
- * @param {*} overrides Socket integration overrides to change the connection URL.
  * @returns {void}
  */
-// eslint-disable-next-line no-unused-vars
-function initWPSSocket(messageHandler, overrides) {
+function initWPSSocket(messageHandler) {
   /**
    * The hard-coded options injection key from webpack-plugin-serve.
    *

src/runtime/sockets/utils/getResourceQuery.js

@@ -0,0 +1,41 @@
+/* global __resourceQuery */
+
+/**
+ * Parse webpack `__resourceQuery` string into an object.
+ * @see https://webpack.js.org/api/module-variables/#__resourcequery-webpack-specific
+ * @param {string} [__resourceQuery]
+ * @returns {*}
+ */
+function getResourceQuery() {
+  const params = {};
+
+  var query = '';
+  if (typeof __resourceQuery === 'string') {
+    query = __resourceQuery;
+  }
+
+  /**
+   * Map __resourceQuery string such as `?foo1=bar1&foo2=bar2`:
+   * - remove `?` from the start
+   * - split from `&`
+   * - split from `=`
+   * The mapped format will be [['foo1', 'bar1'], ['foo2', 'bar2']]
+   */
+  const entries = query
+    .replace(/^\?/, '')
+    .split('&')
+    .map(function (entry) {
+      return entry.split('=');
+    });
+
+  // Add all entries to the overrides object
+  entries.forEach(function (entry) {
+    const key = entry[0];
+    const value = entry[1];
+    params[key] = value;
+  });
+
+  return params;
+}
+
+module.exports = getResourceQuery;

test/unit/getResourceQuery.test.js

@@ -0,0 +1,32 @@
+const getResourceQuery = require('../../src/runtime/sockets/utils/getResourceQuery');
+
+describe('getResourceQuery', () => {
+  let previousQuery;
+
+  beforeEach(() => {
+    previousQuery = global.__resourceQuery;
+  });
+
+  afterEach(() => {
+    global.__resourceQuery = previousQuery;
+  });
+
+  it('should parse __resourceQuery', () => {
+    global.__resourceQuery = '?sockHost=localhost&sockPort=8080&sockPath=/__socket';
+    expect(getResourceQuery()).toEqual({
+      sockHost: 'localhost',
+      sockPath: '/__socket',
+      sockPort: '8080',
+    });
+  });
+
+  it('should handle undefined __resourceQuery', () => {
+    delete global.__resourceQuery;
+    expect(getResourceQuery()).toEqual({});
+  });
+
+  it('should handle empty string __resourceQuery', () => {
+    global.__resourceQuery = '';
+    expect(getResourceQuery()).toEqual({});
+  });
+});