我遇到了同样的问题。问题出在setupProxy.js上。
如果setupProxy.js文件如下所示

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

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

更改如下

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

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

正如在错误中所引用的，onAfterSetupMiddleware和onBeforeSetupMiddleware已被弃用，因此代理方法未按预期工作。因此，当您使用npm start启动服务器时，浏览器会尝试重定向到代理URL。这就是为什么您看到React应用未加载的原因。

这是一个过时的警告，意味着你需要开始使用新建议的配置中间件的方法。不要使用onBeforeSetupMiddleware和onAfterSetupMiddleware，而使用setupMiddlewares-属性。
文档本身可以在Webpack的网站上找到（在本例中为：https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares)
配置将如下所示（来自onBeforeSetupMiddleware和onAfterSetupMiddleware）：

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

    return middlewares
},

另一个解决这个问题的有用方法是查看其他人编写的代码。我发现这个例子很有帮助：https://github.com/facebook/docusaurus/pull/6168

在文件中：节点_模块/React脚本/配置/webpackDevServer. config. js
就像这样

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));
},

更改为

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;
},

I had the same error.

An authentication middleware, in my case AWS Amplify Auth, was changed incorrectly and my webpack config yielded an error. The fix for me was to re-install clean then debug the error.
So delete package-lock.json, delete the node-modules folder, and reinstall with "npm i".
Although this does not get to the root of the issue it should work to at least bring up the Dev Server to view any errors.

这只是一个来自您在应用程序中使用的某个库的弃用警告，您是否尝试在本地上打开http：//localhost：3000？它应该运行良好

尝试更改webpackDevServer.config.js中的名称，它对我很有效。
1.打开node_modules文件夹。
1.搜索webpackDevServer.config.js文件夹。
1.打开js文件并编辑它。

我也有类似的行为。运行react脚本，然后卡在“启动开发服务器..."。虽然它是通过“react-app-rewired”运行的，但我想这是react脚本的一些常见问题。
我把一个现有的项目从react-scripts 4.0.3升级到了5。这就是我的原因。我尝试了很多方法，但不幸的是没有任何帮助。我无法继续前进，并恢复到了react-scripts的v5。
也许这能帮上忙。

对我来说修复它的是运行npm i webpack-dev-middleware。