diff --git a/README.md b/README.md index 26fe3844..d462c217 100644 --- a/README.md +++ b/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` diff --git a/src/helpers/injectRefreshEntry.js b/src/helpers/injectRefreshEntry.js index 38cb187a..966b9825 100644 --- a/src/helpers/injectRefreshEntry.js +++ b/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); diff --git a/src/runtime/ErrorOverlayEntry.js b/src/runtime/ErrorOverlayEntry.js index 34593bc3..2430f5f0 100644 --- a/src/runtime/ErrorOverlayEntry.js +++ b/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; diff --git a/src/runtime/createSocket.js b/src/runtime/createSocket.js index 74c4cfce..be22a36b 100644 --- a/src/runtime/createSocket.js +++ b/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() {