This is a deprecation warning, meaning that you need to start using the newly suggested way of configuring your middleware. Instead of onBeforeSetupMiddleware and onAfterSetupMiddleware, use the setupMiddlewares-property.

The documentation itself can be found on Webpack's website (in this case here: https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares)

The configuration will look something like this (coming from onBeforeSetupMiddleware and onAfterSetupMiddleware):

setupMiddlewares: (middlewares, devServer) => {
    middleware1(devServer.app)
    middleware2(devServer.app)

    return middlewares
},

Another useful way of fixing this issue is by looking at the code others have written to fix this issue. I found this example to be helpful: https://github.com/facebook/docusaurus/pull/6168

I had the same issue. The problem was with the setupProxy.js.

If your setupProxy.js files look like below

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/proxypath', { target: '<target path>' }));
};

Change it as below

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('/proxypath', { target: '<target path>' }));
};

As in the error, you have quoted, onAfterSetupMiddleware and onBeforeSetupMiddleware have been deprecated therefore the proxy method is not working as expected. So when you start the server with npm start the browser tries to redirect to the proxy URL. That's why you see as the react app is not loading.

It's just a deprecation warning from one of the libraries you used within the app, have you tried to open http://localhost:3000 on your local? it is supposed to be running fine