Migrate to webpack-dev-server to 4.0.0

packages/babel-preset-react-app/create.js

@@ -164,6 +164,12 @@ module.exports = function (api, opts, env) {
           loose: true,
         },
       ],
+      [
+        require('@babel/plugin-proposal-private-property-in-object').default,
+        {
+          loose: true,
+        },
+      ],
       // Adds Numeric Separators
       require('@babel/plugin-proposal-numeric-separator').default,
       // Polyfills the runtime needed for async/await, generators, and friends

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

@@ -101,27 +101,27 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(app, server) {
+    onBeforeSetupMiddleware(devServer) {
       // Keep `evalSourceMapMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      devServer.app.use(evalSourceMapMiddleware(devServer));
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(devServer.app);
       }
     },
-    onAfterSetupMiddleware(app) {
+    onAfterSetupMiddleware(devServer) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      app.use(redirectServedPath(paths.publicUrlOrPath));
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };

packages/react-scripts/package.json

@@ -71,7 +71,7 @@
     "source-map-loader": "^1.1.2",
     "style-loader": "3.0.0",
     "webpack": "5.41.1",
-    "webpack-dev-server": "4.0.0-rc.0",
+    "webpack-dev-server": "4.0.0",
     "webpack-manifest-plugin": "3.1.1",
     "workbox-webpack-plugin": "6.2.4"
   },

packages/react-scripts/scripts/start.js

@@ -124,16 +124,14 @@ checkBrowsers(paths.appPath, isInteractive)
       paths.publicUrlOrPath
     );
     // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port,
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
+    devServer.startCallback(() => {
       if (isInteractive) {
         clearConsole();
       }

tasks/local-test.sh

@@ -18,7 +18,7 @@ function print_help {
 
 cd $(dirname $0)
 
-node_version=12
+node_version=14
 current_git_branch=`git rev-parse --abbrev-ref HEAD`
 git_branch=${current_git_branch}
 test_suite=all