(node:13176) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware'选项已过时，请使用'setupMiddlewares'选项。（使用node --trace-deprecation ...显示警告的创建位置）
(node:13176) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware'选项已过时，请使用'setupMiddlewares'选项。
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;
},
我遇到了同样的问题。问题出在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
我遇到了同样的错误。
在我的情况下，一个身份验证中间件（AWS Amplify Auth）被错误地更改，导致我的webpack配置出现错误。 对我来说，解决方法是重新安装清理后再调试错误。
因此，请删除 package-lock.json 文件和 node-modules 文件夹，并使用 "npm i" 重新安装。
虽然这并没有解决问题的根本原因，但可以至少启动开发服务器以查看任何错误。
我遇到了类似的问题。运行React脚本后，卡在“启动开发服务器...”这一步。虽然通过“react-app-rewired”可以运行，但我想这可能是React-scripts的一般性问题。
我将一个现有项目从React-scripts 4.0.3更新到5。这就是我的原因。我尝试了很多方法，但不幸的是没有什么帮助。我无法继续前进，只能将React-scripts的升级还原到v5。
也许这可以帮助某些人。
这只是你在应用程序中使用的一个库发出的弃用警告，你尝试在本地打开http://localhost:3000了吗？它应该能正常运行。
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);
}
}
尝试更改webpackDevServer.config.js中的名称，这对我有效。
对我有用的解决方法是运行 npm i webpack-dev-middleware。