From fcf784f5622e98d6e5ff82794efec9fa45e4934d Mon Sep 17 00:00:00 2001 From: David Burrows Date: Sun, 16 Apr 2017 13:29:24 +0100 Subject: [PATCH 1/2] Use document.currentScript if available to work out the socket connection url When loading a create-react-app bundle from another domain everything works ok except the auto-page reload. The socket connection fails because webpackHotDevClient uses window.location to derive the socket connection url. This commit uses document.currentScript (if available) to derive the SockJS connection url details. --- .../react-dev-utils/webpackHotDevClient.js | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index f15fd06f291..45e74c8bbe6 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -137,13 +137,37 @@ function destroyErrorOverlay() { } // Connect to WebpackDevServer via a socket. -var connection = new SockJS(url.format({ - protocol: window.location.protocol, - hostname: window.location.hostname, - port: window.location.port, - // Hardcoded in WebpackDevServer - pathname: '/sockjs-node' -})); +function getLocation(href) { + var match = href.match( + /^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/ + ); + return ( + match && { + href: href, + protocol: match[1], + host: match[2], + hostname: match[3], + port: match[4], + pathname: match[5], + search: match[6], + hash: match[7] + } + ); +} + +let scriptUrl = document.currentScript + ? getLocation(document.currentScript.src) + : window.location; + +var connection = new SockJS( + url.format({ + protocol: scriptUrl.protocol, + hostname: scriptUrl.hostname, + port: scriptUrl.port, + // Hardcoded in WebpackDevServer + pathname: "/sockjs-node" + }) +); // Unlike WebpackDevServer client, we won't try to reconnect // to avoid spamming the console. Disconnect usually happens From 95e3783842373c420429d47763b60f5407cc409b Mon Sep 17 00:00:00 2001 From: David Burrows Date: Tue, 18 Apr 2017 20:26:17 +0100 Subject: [PATCH 2/2] Use existing url function to parse url string instead of adding adding a getLocation local function --- .../react-dev-utils/webpackHotDevClient.js | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 45e74c8bbe6..9ad00db3239 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -137,26 +137,8 @@ function destroyErrorOverlay() { } // Connect to WebpackDevServer via a socket. -function getLocation(href) { - var match = href.match( - /^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/ - ); - return ( - match && { - href: href, - protocol: match[1], - host: match[2], - hostname: match[3], - port: match[4], - pathname: match[5], - search: match[6], - hash: match[7] - } - ); -} - let scriptUrl = document.currentScript - ? getLocation(document.currentScript.src) + ? url.parse(document.currentScript.src) : window.location; var connection = new SockJS(