React app error

Language Help General Programming
1

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!

2

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
    devServer.app.use(evalSourceMapMiddleware(devServer));

    if (fs.existsSync(paths.proxySetup)) {
    // This registers user provided middleware for proxy reasons
    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));
},

To this:

setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
          throw new Error('webpack-dev-server is not defined')
      }
  
      if (fs.existsSync(paths.proxySetup)) {
          require(paths.proxySetup)(devServer.app)
      }
  
      middlewares.push(
          evalSourceMapMiddleware(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorkerMiddleware(paths.publicUrlOrPath)
      )
  
      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
3

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?

4

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.