Bump webpack-dev-server (#7988)

Author: ianschmitz

packages/create-react-app/yarn.lock.cached

@@ -72,7 +72,6 @@
     "react-error-overlay": "^6.0.3",
     "recursive-readdir": "2.2.2",
     "shell-quote": "1.7.2",
-    "sockjs-client": "1.4.0",
     "strip-ansi": "5.2.0",
     "text-table": "0.2.0"
   },

packages/react-dev-utils/package.json

@@ -16,7 +16,6 @@
 // that looks similar to our console output. The error overlay is inspired by:
 // https://github.com/glenjamin/webpack-hot-middleware
 
-var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var launchEditorEndpoint = require('./launchEditorEndpoint');
@@ -58,9 +57,9 @@ if (module.hot && typeof module.hot.dispose === 'function') {
 }
 
 // Connect to WebpackDevServer via a socket.
-var connection = new SockJS(
+var connection = new WebSocket(
   url.format({
-    protocol: window.location.protocol,
+    protocol: 'ws',
     hostname: window.location.hostname,
     port: window.location.port,
     // Hardcoded in WebpackDevServer

packages/react-dev-utils/webpackHotDevClient.js

@@ -66,6 +66,12 @@ module.exports = function(proxy, allowedHost) {
     // in the Webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
+    // Use 'ws' instead of 'sockjs-node' on server since we're using native
+    // websockets in `webpackHotDevClient`.
+    transportMode: 'ws',
+    // Prevent a WS client from getting injected as we're already including
+    // `webpackHotDevClient`.
+    injectClient: false,
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
     publicPath: '/',

packages/react-scripts/config/webpackDevServer.config.js

@@ -47,25 +47,36 @@ export default feature =>
       let window;
 
       if (process.env.E2E_FILE) {
-        window = (await JSDOM.fromFile(file, {
-          pretendToBeVisual: true,
-          resources: fileResourceLoader,
-          runScripts: 'dangerously',
-          url,
-        })).window;
+        window = (
+          await JSDOM.fromFile(file, {
+            pretendToBeVisual: true,
+            resources: fileResourceLoader,
+            runScripts: 'dangerously',
+            url,
+          })
+        ).window;
       } else {
-        window = (await JSDOM.fromURL(url, {
-          pretendToBeVisual: true,
-          resources: 'usable',
-          runScripts: 'dangerously',
-        })).window;
+        window = (
+          await JSDOM.fromURL(url, {
+            pretendToBeVisual: true,
+            resources: 'usable',
+            runScripts: 'dangerously',
+          })
+        ).window;
       }
 
+      const cleanup = () => {
+        if (window) {
+          window.close();
+          window = null;
+        }
+      };
+
       const { document } = window;
 
       const cancelToken = setTimeout(() => {
         // Cleanup jsdom instance since we don't need it anymore
-        window.close();
+        cleanup();
 
         reject(`Timed out loading feature: ${feature}`);
       }, 10000);
@@ -81,7 +92,7 @@ export default feature =>
           clearTimeout(cancelToken);
 
           // Cleanup jsdom instance since we don't need it anymore
-          window.close();
+          cleanup();
 
           reject(`Error loading feature: ${feature}`);
         },

packages/react-scripts/fixtures/kitchensink/template/integration/initDOM.js

@@ -77,7 +77,7 @@
     "ts-pnp": "1.1.5",
     "url-loader": "2.2.0",
     "webpack": "4.41.2",
-    "webpack-dev-server": "3.2.1",
+    "webpack-dev-server": "3.9.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "4.3.1"
   },

packages/react-scripts/package.json

@@ -65,7 +65,7 @@ set -x
 cd ..
 root_path=$PWD
 # Set a Windows path for GitBash on Windows
-if [ $AGENT_OS == 'Windows_NT' ]; then
+if [ "$AGENT_OS" == 'Windows_NT' ]; then
   root_path=$(cmd //c cd)
 fi
 

tasks/e2e-kitchensink-eject.sh

@@ -65,7 +65,7 @@ set -x
 cd ..
 root_path=$PWD
 # Set a Windows path for GitBash on Windows
-if [ $AGENT_OS == 'Windows_NT' ]; then
+if [ "$AGENT_OS" == 'Windows_NT' ]; then
   root_path=$(cmd //c cd)
 fi