Add custom sockHost/sockPort/sockPath

README.md

@@ -169,6 +169,26 @@ Modifies how the error overlay integration works in the plugin.
     };
     ```
 
+
+### `options.sockHost`
+
+Type: `string`
+Default: effectively `window.location.hostname`
+
+Set this if you are running webpack on a host other than `window.location.hostname`. This is used by the error overlay module.
+
+### `options.sockPort`
+
+Type: `number`
+Default: effectively `window.location.port`
+
+Set this if you are running webpack on a port other than `window.location.port` 
+
+### `options.sockPath`
+
+Type: `string`
+Default: `/sockjs-node`
+
 ### `options.useLegacyWDSSockets`
 
 Type: `boolean`

src/helpers/injectRefreshEntry.js

@@ -8,13 +8,17 @@
  * @returns {WebpackEntry} An injected entry object.
  */
 const injectRefreshEntry = (originalEntry, options) => {
+  const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : '';
+  const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
+  const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : '';
+  const queryParams = `?options${sockHost}${sockPort}${sockPath}`;
   const entryInjects = [
     // Legacy WDS SockJS integration
     options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'),
     // React-refresh runtime
     require.resolve('../runtime/ReactRefreshEntry'),
     // Error overlay runtime
-    options.overlay && options.overlay.entry,
+    options.overlay && (options.overlay.entry  + queryParams),
     // React-refresh Babel transform detection
     require.resolve('../runtime/BabelDetectComponent'),
   ].filter(Boolean);

src/runtime/ErrorOverlayEntry.js

@@ -1,5 +1,3 @@
-// TODO: Implement handling of this
-// eslint-disable-next-line no-unused-vars
 /* global __resourceQuery, __react_refresh_error_overlay__ */
 
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -73,8 +71,13 @@ function compileMessageHandler(message) {
   }
 }
 
+let overrides = {};
+if (__resourceQuery) {
+  overrides = require('querystring').parse(__resourceQuery.slice(1));
+}
+
 // Registers handlers for compile errors
-createSocket(compileMessageHandler);
+createSocket(compileMessageHandler, overrides);
 // Registers handlers for runtime errors
 registerErrorHandler(function handleError(error) {
   hasRuntimeErrors = true;

src/runtime/createSocket.js

@@ -8,21 +8,19 @@ const loadWHMEventSource = require('./WHMEventSource');
  * Creates a socket server for HMR according to the user's Webpack configuration.
  * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
  */
-function createSocket(messageHandler) {
+function createSocket(messageHandler, options) {
   // This adds support for custom WDS socket transportModes
   // In the future, we should add support for custom clients to better support WDM
   if (typeof __webpack_dev_server_client__ !== 'undefined') {
     const SocketClient = __webpack_dev_server_client__;
     const connection = new SocketClient(
-      // TODO: Dynamically generate this to handle resourceQuery
-      // TODO: Use resourceQuery to fix servers under proxies
       url.format({
         protocol: window.location.protocol,
-        hostname: window.location.hostname,
-        port: window.location.port,
+        hostname: options.sockHost || window.location.hostname,
+        port: options.sockPort || window.location.port,
         // TODO: Support usage of custom sockets after WDS 4.0 is released
         // Ref: https://github.com/webpack/webpack-dev-server/pull/2055
-        pathname: '/sockjs-node',
+        pathname: options.sockPath || '/sockjs-node',
       })
     );
     connection.onClose(function onSocketClose() {