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

Question

（节点：13176）[DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning：“onAfterSetupMiddleware”选项已弃用。请使用“setupMiddlewares”选项。（用于node --trace-deprecation ...显示创建警告的位置）（节点：13176）[DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning：“onBeforeSetupMiddleware”选项已弃用。请使用“setupMiddlewares”选项

Answer 1

我遇到过同样的问题。问题出在 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 2

在文件中：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 3

这是一个弃用警告，意味着您需要开始使用新建议的配置中间件的方法。使用- 属性代替onBeforeSetupMiddleware和。onAfterSetupMiddlewaresetupMiddlewares

文档本身可以在 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

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