React app error

There is a huge problem with my React app. It suddenly started giving me this error:
(node:16572) [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:16572) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.
If anyone had this problem and knows how to fix it, please share!

This is a known issue with create-react-app.

I successfully fixed it in my app by changing the following in node_modules\react-scripts\config\webpackDevServer.config.js:

Change this:

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;

    if (fs.existsSync(paths.proxySetup)) {
    // This registers user provided middleware for proxy reasons
onAfterSetupMiddleware(devServer) {
    // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match;

    // 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.

To this:

setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
          throw new Error('webpack-dev-server is not defined')
      if (fs.existsSync(paths.proxySetup)) {
      return middlewares;

Here is the StackOverflow answer that gave me this solution: reactjs - Cant load a react app after starting server - Stack Overflow

Here is the create-react-app issue on Github: Use of deprecated webpack DevServer onBeforeSetupMiddleware and onAfterSetupMiddleware options · Issue #11860 · facebook/create-react-app · GitHub

1 Like

Thanks, I’m aware of this type of solution but I was advised not to change anything inside of node modules. Regardless, my app now won’t even load for some reason. It says ‘This site can’t be reached.’ I really have no idea what happened overnight, but it seems like I’ll need to start from scratch. Is it better to use Vite this time instead of CRA?

Yes, I would recommend Vite. CRA has been removed from the official docs as the recommended method for setting up a React project.

While the docs now suggest NextJS as the first option, I’d still recommend Vite as NextJS uses server components by default which may be confusing for React newbies.