Update webpack-dev-server to beta.3

Author: Morten N.O. Henriksen

docusaurus/docs/advanced-configuration.md

@@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen
 | PORT                      |   ✅ Used   | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | HTTPS                     |   ✅ Used   | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | WDS_SOCKET_HOST           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details.                                                                                                                                                                                                              |
-| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
+| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
 | WDS_SOCKET_PORT           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details.                                                                                                                                                                                                                          |
 | PUBLIC_URL                |   ✅ Used   |  ✅ Used   | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                                                     |
 | BUILD_PATH                | 🚫 Ignored  |  ✅ Used   | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.                                                                                                                                                                                                                                                                                                                                                                                          |

packages/react-dev-utils/webpackHotDevClient.js

@@ -63,7 +63,7 @@ var connection = new WebSocket(
     hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
     port: process.env.WDS_SOCKET_PORT || window.location.port,
     // Hardcoded in WebpackDevServer
-    pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
+    pathname: process.env.WDS_SOCKET_PATH || '/ws',
     slashes: true,
   })
 );

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

@@ -19,7 +19,7 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
@@ -73,18 +73,20 @@ module.exports = function (proxy, allowedHost) {
         ignored: ignoredFiles(paths.appSrc),
       },
     },
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
     client: {
       // Enable custom sockjs pathname for websocket connection to hot reloading server.
       // Enable custom sockjs hostname, pathname and port for websocket connection
       // to hot reloading server.
       host: sockHost,
       path: sockPath,
       port: sockPort,
+      overlay: false,
+      needClientEntry: false,
+      // Prevent a WS client from getting injected as we're already including
+      // `webpackHotDevClient`.
+      needHotEntry: false
     },
-    dev: {
+    devMiddleware: {
       // It is important to tell WebpackDevServer to use the same "publicPath" path as
       // we specified in the webpack config. When homepage is '.', default to serving
       // from the root.
@@ -94,7 +96,6 @@ module.exports = function (proxy, allowedHost) {
 
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.

packages/react-scripts/package.json

@@ -81,7 +81,7 @@
     "style-loader": "2.0.0",
     "ts-pnp": "1.2.0",
     "webpack": "5.37.0",
-    "webpack-dev-server": "4.0.0-beta.0",
+    "webpack-dev-server": "4.0.0-beta.3",
     "webpack-manifest-plugin": "3.1.1",
     "workbox-webpack-plugin": "6.1.5"
   },