fix(client): Make public path on client match dev server publicPath

.eslintrc

@@ -2,7 +2,11 @@
   "extends": ["webpack", "prettier"],
   "globals": {
     "document": true,
-    "window": true
+    "window": true,
+    "self": true,
+    "WorkerGlobalScope": true,
+    "__resourceQuery": true,
+    "__webpack_dev_server_client__": true
   },
   "parserOptions": {
     "sourceType": "script",

azure-pipelines.yml

@@ -47,9 +47,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
     steps:
       - task: NodeTool@0
         inputs:
@@ -98,9 +95,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
     steps:
       - task: NodeTool@0
         inputs:
@@ -149,9 +143,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
     steps:
       - script: 'git config --global core.autocrlf input'
         displayName: 'Config git core.autocrlf'

bin/webpack-dev-server.js

@@ -4,8 +4,6 @@
 
 /* eslint-disable no-shadow, no-console */
 
-const fs = require('fs');
-const net = require('net');
 const debug = require('debug')('webpack-dev-server');
 const importLocal = require('import-local');
 const yargs = require('yargs');
@@ -115,51 +113,13 @@ function startDevServer(config, options) {
     throw err;
   }
 
-  if (options.socket) {
-    server.listeningApp.on('error', (e) => {
-      if (e.code === 'EADDRINUSE') {
-        const clientSocket = new net.Socket();
-
-        clientSocket.on('error', (err) => {
-          if (err.code === 'ECONNREFUSED') {
-            // No other server listening on this socket so it can be safely removed
-            fs.unlinkSync(options.socket);
-
-            server.listen(options.socket, options.host, (error) => {
-              if (error) {
-                throw error;
-              }
-            });
-          }
-        });
-
-        clientSocket.connect({ path: options.socket }, () => {
-          throw new Error('This socket is already used');
-        });
-      }
-    });
-
-    server.listen(options.socket, options.host, (err) => {
-      if (err) {
-        throw err;
-      }
-
-      // chmod 666 (rw rw rw)
-      const READ_WRITE = 438;
-
-      fs.chmod(options.socket, READ_WRITE, (err) => {
-        if (err) {
-          throw err;
-        }
-      });
-    });
-  } else {
-    server.listen(options.port, options.host, (err) => {
-      if (err) {
-        throw err;
-      }
-    });
-  }
+  // options.socket does not have a default value, so it will only be set
+  // if the user sets it explicitly
+  server.listen(options.socket || options.port, options.host, (err) => {
+    if (err) {
+      throw err;
+    }
+  });
 }
 
 processOptions(config, argv, (config, options) => {

client-src/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

client-src/clients/BaseClient.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /* eslint-disable
   no-unused-vars
 */

client-src/clients/SockJSClient.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /* eslint-disable
   no-unused-vars
 */

client-src/clients/WebsocketClient.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /* global WebSocket */
 
 /* eslint-disable

client-src/default/index.js

@@ -1,14 +1,17 @@
-'use strict';
-
-/* global __resourceQuery WorkerGlobalScope self */
 /* eslint prefer-destructuring: off */
-const stripAnsi = require('strip-ansi');
-const socket = require('./socket');
-const overlay = require('./overlay');
-const { log, setLogLevel } = require('./utils/log');
-const sendMessage = require('./utils/sendMessage');
-const reloadApp = require('./utils/reloadApp');
-const createSocketUrl = require('./utils/createSocketUrl');
+import stripAnsi from 'strip-ansi';
+import socket from './socket';
+import {
+  clear as clearOverlay,
+  showMessage as showMessageOverlay,
+} from './overlay';
+import { log, setLogLevel } from './utils/log';
+import sendMessage from './utils/sendMessage';
+import reloadApp from './utils/reloadApp';
+import createSocketUrl from './utils/createSocketUrl';
+import updatePublicPath from './utils/updatePublicPath';
+
+updatePublicPath(__resourceQuery);
 
 const status = {
   isUnloading: false,
@@ -47,7 +50,7 @@ const onSocketMessage = {
     log.info('[WDS] App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     sendMessage('Invalid');
   },
@@ -57,7 +60,7 @@ const onSocketMessage = {
   'still-ok': function stillOk() {
     log.info('[WDS] Nothing changed.');
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     sendMessage('StillOk');
   },
@@ -93,7 +96,7 @@ const onSocketMessage = {
   ok() {
     sendMessage('Ok');
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     if (options.initial) {
       return (options.initial = false);
@@ -112,7 +115,7 @@ const onSocketMessage = {
       log.warn(strippedWarnings[i]);
     }
     if (options.useWarningOverlay) {
-      overlay.showMessage(warnings);
+      showMessageOverlay(warnings);
     }
 
     if (options.initial) {
@@ -128,7 +131,7 @@ const onSocketMessage = {
       log.error(strippedErrors[i]);
     }
     if (options.useErrorOverlay) {
-      overlay.showMessage(errors);
+      showMessageOverlay(errors);
     }
     options.initial = false;
   },

client-src/default/overlay.js

@@ -1,12 +1,10 @@
-'use strict';
-
 // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
-const ansiHTML = require('ansi-html');
-const { AllHtmlEntities } = require('html-entities');
+import ansiHTML from 'ansi-html';
+import { AllHtmlEntities as Entities } from 'html-entities';
 
-const entities = new AllHtmlEntities();
+const entities = new Entities();
 const colors = {
   reset: ['transparent', 'transparent'],
   black: '181818',
@@ -95,8 +93,8 @@ function ensureOverlayDivExists(onOverlayDivReady) {
   document.body.appendChild(overlayIframe);
 }
 
-// Successful compilation.
-function clear() {
+// successful compilation.
+export function clear() {
   if (!overlayDiv) {
     // It is not there in the first place.
     return;
@@ -110,7 +108,7 @@ function clear() {
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
-function showMessage(messages) {
+export function showMessage(messages) {
   ensureOverlayDivExists((div) => {
     // Make it look similar to our terminal.
     div.innerHTML = `<span style="color: #${
@@ -120,8 +118,3 @@ function showMessage(messages) {
     )}`;
   });
 }
-
-module.exports = {
-  clear,
-  showMessage,
-};

client-src/default/socket.js

@@ -1,6 +1,3 @@
-'use strict';
-
-/* global __webpack_dev_server_client__ */
 /* eslint-disable
   camelcase
 */
@@ -58,4 +55,4 @@ const socket = function initSocket(url, handlers) {
   });
 };
 
-module.exports = socket;
+export default socket;

client-src/default/utils/createSocketUrl.js

@@ -1,85 +1,19 @@
-'use strict';
-
-/* global self */
-
-const url = require('url');
-const querystring = require('querystring');
-const getCurrentScriptSource = require('./getCurrentScriptSource');
+import url from 'url';
+import getUrlParts from './getUrlParts';
 
 function createSocketUrl(resourceQuery) {
-  let urlParts;
-
-  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
-    // If this bundle is inlined, use the resource query to get the correct url.
-    urlParts = url.parse(resourceQuery.substr(1));
-  } else {
-    // Else, get the url from the <script> this file was called with.
-    let scriptHost = getCurrentScriptSource();
-
-    // eslint-disable-next-line no-useless-escape
-    scriptHost = scriptHost.replace(/\/[^\/]+$/, '');
-    urlParts = url.parse(scriptHost || '/', false, true);
-  }
-
-  if (!urlParts.port || urlParts.port === '0') {
-    urlParts.port = self.location.port;
-  }
-
-  const { auth, path } = urlParts;
-  let { hostname, protocol } = urlParts;
-
-  // check ipv4 and ipv6 `all hostname`
-  // why do we need this check?
-  // hostname n/a for file protocol (example, when using electron, ionic)
-  // see: https://github.com/webpack/webpack-dev-server/pull/384
-  const isAnyHostname =
-    (hostname === '0.0.0.0' || hostname === '::') &&
-    self.location.hostname &&
-    // eslint-disable-next-line no-bitwise
-    !!~self.location.protocol.indexOf('http');
-
-  if (isAnyHostname) {
-    hostname = self.location.hostname;
-  }
-
-  // `hostname` can be empty when the script path is relative. In that case, specifying
-  // a protocol would result in an invalid URL.
-  // When https is used in the app, secure websockets are always necessary
-  // because the browser doesn't accept non-secure websockets.
-  if (
-    hostname &&
-    (self.location.protocol === 'https:' || urlParts.hostname === '0.0.0.0')
-  ) {
-    protocol = self.location.protocol;
-  }
-
-  // default values of the sock url if they are not provided
-  let sockHost = hostname;
-  let sockPath = '/sockjs-node';
-  let sockPort = urlParts.port;
-
-  // eslint-disable-next-line no-undefined
-  const shouldParsePath = path !== null && path !== undefined && path !== '/';
-  if (shouldParsePath) {
-    const parsedQuery = querystring.parse(path);
-    // all of these sock url params are optionally passed in through
-    // resourceQuery, so we need to fall back to the default if
-    // they are not provided
-    sockHost = parsedQuery.sockHost || sockHost;
-    sockPath = parsedQuery.sockPath || sockPath;
-    sockPort = parsedQuery.sockPort || sockPort;
-  }
+  const urlParts = getUrlParts(resourceQuery);
 
   return url.format({
-    protocol,
-    auth,
-    hostname: sockHost,
-    port: sockPort,
+    protocol: urlParts.protocol,
+    auth: urlParts.auth,
+    hostname: urlParts.sockHost,
+    port: urlParts.sockPort,
     // If sockPath is provided it'll be passed in via the resourceQuery as a
     // query param so it has to be parsed out of the querystring in order for the
     // client to open the socket to the correct location.
-    pathname: sockPath,
+    pathname: urlParts.sockPath,
   });
 }
 
-module.exports = createSocketUrl;
+export default createSocketUrl;

client-src/default/utils/getCurrentScriptSource.js

@@ -1,5 +1,3 @@
-'use strict';
-
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
@@ -17,4 +15,4 @@ function getCurrentScriptSource() {
   throw new Error('[WDS] Failed to get current script source.');
 }
 
-module.exports = getCurrentScriptSource;
+export default getCurrentScriptSource;