DeprecationWarnings in webpack

[syrex1013]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-scripts@5.0.1 for the project I'm working on.

** The Problem **
(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

Here is the diff that solved my problem:

diff --git a/node_modules/react-scripts/config/webpackDevServer.config.js b/node_modules/react-scripts/config/webpackDevServer.config.js
index 522a81b..22790c6 100644
--- a/node_modules/react-scripts/config/webpackDevServer.config.js
+++ b/node_modules/react-scripts/config/webpackDevServer.config.js
@@ -109,27 +109,22 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    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
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+          throw new Error('webpack-dev-server is not defined')
+      }
   
       if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
+          require(paths.proxySetup)(devServer.app)
       }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      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
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
-    },
+      middlewares.push(
+          evalSourceMapMiddleware(devServer),
+          redirectServedPath(paths.publicUrlOrPath),
+          noopServiceWorkerMiddleware(paths.publicUrlOrPath)
+      )
+  
+      return middlewares;
+  },
   };
 };

This issue body was partially generated by patch-package.