Repository navigation
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated #12035
Description
Activity
- Reacted by AshNotGrey, HagbardCeline and PdeKingsleyReacted by Vandeputte Brice
I'm having the same warning too
Any solution to this?Reacted by Aleksandar Angelov, Mike Ismahilov, AshNotGrey, digitAI-4N6, Radha Satam, Aqeel Bhat and PdeKingsleyReacted by asheerali, Giorgos and Sahand RahmatPanahme too
I'm having the same warning too Any solution to this?
Reacted by Tagir Basharov, Hos.Mercury, Lwrigh1, remmaso, Marcelo Villalba, Radha Satam and Aqeel BhatReacted by Zane Shaw, Nick Gault, kartik paliwal, Leon Adler, Nir Goldman, Abbosbek Akhmedov, Evan-Figueroa, keyeron16, Yanis Falaki, Rigo and 2 moresame issue
Reacted by Tagir Basharov, Hos.Mercury, Koorosh, Lwrigh1, Omar Rafael Toribio, Mike Ismahilov, Marcelo Villalba, MOHAMMAD SALAUDDIN and Aqeel BhatReacted by Leon Adler, Nir Goldman, Abbosbek Akhmedov, Azarchaniel, asheerali, Giorgos and Sahand RahmatPanahi have the same problem
Reacted by Hos.Mercury, Damir Ahmedshin, Lwrigh1, Marcelo Villalba, Dima Osadchy and apolloReacted by Leon Adler, Nir Goldman, Abbosbek Akhmedov, Azarchaniel, asheerali, Giorgos, Mirukai and Sahand RahmatPanahReacted by Dima OsadchyI thought i was the only one. but let me ask something is this error has to do with the ERR_CONNECTION_REFUSED error?
Reacted by Pratik Borsadiya and RokkitMittensSame Error here.
Reacted by MEARAJ BHAGAD, Lwrigh1 and Mike IsmahilovReacted by Leon Adler, Nir Goldman, Evan-Figueroa, asheerali, Mirukai and Sahand RahmatPanahI am getting the same error:
"(node:9112) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Usenode --trace-deprecation ...to show where the warning was created)
(node:9112) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option."Reacted by Bianca Vellego, vidyaj08, DOWNUT, Marcelo Villalba, Silvasss, G2, Topollo and SRvasoya31Reacted by asheerali and GiorgosThe same thing here after upgrade to ..... "react-scripts": "^5.0.0" (Node 16.*)
$ npm start
test@0.1.0 start
react-scripts start(node:21944) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Usenode --trace-deprecation ...to show where the warning was created)(node:21944) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...Compiled successfully!
webpack 5.70.0 compiled successfully in 18347 ms
Reacted by AleeshaYadav22, Leon Adler, Nir Goldman, f00dog-x300, viral rupani, asheerali, Nur Arifin, b-clampett, suseJ-niveK, akshaynexapp and 6 moreThis warning disappeared using the repair option in the node.js file. It worked for me
I got a warning when npm start. Please help me solve the problem.
(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use
node --trace-deprecation ...to show where the warning was created) (node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.Reacted by BaniGrisson, John-Dag Addy, Mac Jonner Macha, Abbosbek Akhmedov, Shohel Rana, Djay, patma7p, brenoemori, Srijan, sergiorodfe and 1 moreReacted by GuilhermeFCunha, asheerali, Max and patdcReacted by Aleksandar Angelov, J. Alberto, Radha Satam, Aqeel Bhat and S Wojtii am facing node(8868) type of error. Please help me solve the problem
(node:8868) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE]
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Usenode --trace-deprecation ...to show where the warning was created)
(node:8868) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.Reacted by BaniGrissonReacted by Walter Macambira, Leon Adler, Chris Rabe, asheerali, Haseebullah Memon, Yazeed Sabri and David RodenI got also the same warning!
please any solution available ?
(node:11648) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' optionReacted by BaniGrisson, Dhara Bindal and Marcelo MarçalReacted by Walter Macambira, Leon Adler, Nir Goldman, Abbosbek Akhmedov, Kim Dequilla, Chris Rabe, Mirukai, Yazeed Sabri and David RodenI am facing the same issue
Reacted by BaniGrisson, Rajesh Sureliya, Lwrigh1 and Marcelo VillalbaReacted by Walter Macambira, Charlie Wynn, Leon Adler, Nir Goldman, Azarchaniel, Kim Dequilla, asheerali, D4RKONION, Mirukai and David Roden83 remaining items
I did
npm remove react-scripts --forceand thennpm add -D react-scripts --force
🎉 it works.Reacted by Frank Rügamer, Tobias Andersen, Radha Satam, Nazim Lachter, Your Mother, Ion, Yazeed Sabri, Serhii Dotsenko, Hope, aron1964 and 1 moreIt seems like Create React App is dead and this issue will never be fixed. The best solution is to use Vite instead.
Reacted by Tuan Nguyen, Alok Gupta, radthenone, chnk, dkocich, Radha Satam, Russell Ward, Anastasiya Sachko and Dave BeerReacted by Kristinne AbrenicaReacted by Mohammad-Mohsen Aseman-Manzarremoving the following code from
node_modules\react-scripts\config\webpackDevServer.config.jsmade the warning go awayonBeforeSetupMiddleware(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)); },
Reacted by Sheyla Cruz CastroHi All,
Please refer to this article for an alternative snippet to "onBeforeSetupMiddleware" and "onAfterSetupMiddleware" within
node_modules/react-scripts/config/webpackDevServer.config.js:https://discuss.codecademy.com/t/react-app-error/779264/2
This has fixed the error for me! 👍
Reacted by NorbertReacted by Niharika Thakur, hbertsch, Валера and Frikk Nytun JohnsenI used have same issue i rectified it by below solution
Step-1 Go to this file path : node_modules\react-scripts\config\webpackDevServer.config.js
Step - 2 Replace below codeonBeforeSetupMiddleware(devServer) {
// KeepevalSourceMapMiddleware
// middlewares beforeredirectServedPathotherwise 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 toPUBLIC_URLorhomepagefrompackage.jsonif 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.
// #2272 (comment)
devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},Step - 3 With the below code
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;
}Reacted by David RodenReacted by arussell-wc and Yazeed SabriThis was the error I had
(node:20104) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupM Compiled successfully!
After a number of searches and trials, I solved it by visiting
- node_modules/react-scripts/config/webpackDevServer.config.js
And replaced this deprecated code:
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)); },
With this current one:
setupMiddlewares: function(middlewares, devServer) { // Middleware setup code devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath)); devServer.app.use(redirectServedPath(paths.publicUrlOrPath)); return middlewares; },
Reacted by arussell-wcReacted by David RodenI used Cargo(https://craco.js.org/docs/configuration/devserver/) to overwrite Weppack configs.
cargo.config.js
module.exports = { webpack: { devServer: { setupMiddlewares: function(middlewares, devServer) { if (fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.push( evalSourceMapMiddleware(devServer), redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; }, } }, devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => { delete devServerConfig.onBeforeSetupMiddleware delete devServerConfig.onAfterSetupMiddleware return devServerConfig }, }Reacted by Ryan P. Hutchison, Yazeed Sabri and Stanislav CmakalReacted by Evan Purcer and Yazeed SabriFinalmente consertei isso. Se você estiver usando o Yarn, basta executar o Yarn eject, então você deverá encontrar o arquivo '/config/webpackDevServer.config.js'. Em vez de onBeforeSetupMiddleware e onAfterSetupMiddleware, use a propriedade setupMiddlewares. Como antes:
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)); },depois:
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; },mas não funciona quando você hospeda o servidor porque você não pode alterá-lo lá, pois isso deve ser feito nos módulos do nó
Como editaremos o código no node-modules no pipeline de implantação
It worked for me, thanks
facing same issue :
(node:620) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ... to show where the warning was created)
(node:620) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.any solutions to this?
Reacted by David RodenMy way of solving this was... npm run build, then npm install -g serve, npx serve -s build. I couldn't figure out the webpack shit!! and the problem lied with the npm start so instead I used npx serve -s build... hope it helps!
great thanks!
just install webvital by
npm install web-vitalsfacing same issue : (node:620) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use node --trace-deprecation ... to show where the warning was created) (node:620) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
any solutions to this?
npm install web-vitals
On my app I was able to solve this by creating a patch for react-scripts using patch-package:
- Install patch-package
npm i patch-package
-
Find the
packages/react-scripts/config/getHttpsConfig.jsandpackages/react-scripts/config/webpackDevServer.config.jsfiles under react-scripts innode_modulesand replace their contents by the fix available at this PR opened in the create-react-app repository -
Create a patch for react-scripts
npx patch-package react-scripts
- On
package.json, call patch-package onpostinstallscript in order to apply the patch after eachnpm install
"scripts": { "postinstall": "patch-package" }
- Delete
node_modulesand install it again
npm i
Reacted by Hemmarit HemaToday I installed a fresh react app and got the same error in my first running :))
FIXED The issue by Restarting the PC seems like the issue was related to the WebPack and the Browser
I got a warning when npm start.
Please help me solve the problem.
(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use
node --trace-deprecation ...to show where the warning was created)(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.