启动服务器后无法加载反应应用程序

Question

（节点：13176）[DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] 弃用警告：“onAfterSetupMiddleware”选项已弃用。请使用“setupMiddlewares”选项。 （使用

node --trace-deprecation ...

显示警告的创建位置） （节点：13176）[DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning：“onBeforeSetupMiddleware”选项已弃用。请使用“setupMiddlewares”选项

Answer 1

在文件中：node_modules/react-scripts/config/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;
},

Answer 2

我也有同样的问题。问题出在 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。这就是为什么您看到反应应用程序未加载。

Answer 3

这是一个弃用警告，意味着您需要开始使用新建议的配置中间件的方法。使用

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

Answer 4

我也有同样的错误。

身份验证中间件（在我的例子中为 AWS Amplify Auth）被错误地更改，并且我的 webpack 配置产生了错误。对我来说，修复方法是重新安装 clean，然后调试错误。

因此删除package-lock.json，删除node-modules文件夹，然后使用“npm i”重新安装。

虽然这没有找到问题的根源，但至少应该可以启动开发服务器来查看任何错误。

Answer 5

这只是您在应用程序中使用的库之一发出的弃用警告，您是否尝试在本地打开 http://localhost:3000 ？它应该运行良好

Answer 6

我也有类似的行为。运行反应脚本，然后卡在“正在启动开发服务器...”。虽然它通过“react-app-rewired”运行，但我想这是react-scripts的一些常见问题。

我将现有项目从react-scripts 4.0.3更新到5。这就是我的原因。我尝试了很多方法，但不幸的是没有任何帮助。我无法继续前进并恢复到react-scripts v5的升级。

也许这对某人有帮助。

Answer 7

正如最重要的答案之一提到的，问题是

setupProxy.js

，但就我而言，当我添加此文件时，它阻止了开发服务器启动，因此我没有任何线索该文件是如何导致问题的。我将 app.use() 包装在 try 和 catch 块中，问题就解决了。

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

module.exports = function(app) {
 try{
    app.use(
        '/api',
        proxy({
          target: 'http://localhost:3001',
          changeOrigin: true
        })
      )
 }
 catch(err){
    console.log(err.message);
 }
}

Answer 8

我遇到了同样的问题。我通过删除

node_modules

目录，然后使用命令

npm install

重新安装它来解决它。

Answer 9

为我解决问题的是运行

npm i webpack-dev-middleware

。

Answer 10

尝试更改

webpackDevServer.config.js

中的名称，这对我有用。

1. 打开node_modules文件夹。
2. 搜索 webpackDevServer.config.js。
3. 打开js文件并编辑它。