DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated

[JackoPham]

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.

[linzhipeng98]

#11860

[Cyebukayire]

I'm having the same warning too
Any solution to this?

[johnnychengchj123]

me too

I'm having the same warning too Any solution to this?

[imransilvake]

same issue

[iiaan]

i have the same problem

[yousefalkhatibDev]

I thought i was the only one. but let me ask something is this error has to do with the ERR_CONNECTION_REFUSED error?

[khizar-hayyat-72]

Same Error here.

[nurzhanx]

Same error in docker container. Docker version is 20.10.12, base image is node:alpine

[gars150387]

I 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.
(Use node --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."

[oxicot]

The 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.
(Use node --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

[nspool]

Is this a duplicate of #11860 ?

[gars150387]

This 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.

[HaseebullahMemon]

i 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.
(Use node --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.

[SohelTanbir]

I 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' option

[anveshiano]

I am facing the same issue

[kojidev]

Would you all stop spamming? What is the purpose of you writing that you have the same issue? Will that fix the issue quicker? Subscribe to the issue and shut up

[alekennedy]

I have de same error with node 17-slim image in docker but in my computer I have node 17.7.0 and doesn't has the warning

[SwatiTParshuramkar]

(node:39133) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] (Use node --trace-deprecation ... to show where the warning was created)
[1] (node:39133) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

any solution for this warning?

[RussellOsiemo]

I have the same issue

[dear983604]

This 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.

What did you do?

[FrancescoVarsallona]

Deleting node_modules and run npm install has fixed for me. Probably some dependency has to be update

[SwatiTParshuramkar]

which dependency needs to update

…

On Mon, Apr 11, 2022 at 11:43 AM FrancescoVarsallona < ***@***.***> wrote: Deleting node_modules and run npm install fixed for me. Probably some dependency has to be update — Reply to this email directly, view it on GitHub <#12035 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATBEWHBBQCV5H4E4L2UJXRLVEO7KJANCNFSM5N4363XA> . You are receiving this because you commented.Message ID: ***@***.***>

[MSSPL-KamalenduGarai]

I am getting same warnings in multiple systems which have been installed at different point of time. I have tried removing and installing fresh did not fix the issue. My environment is Node 16.13.1, NPM 8.3.0

[RichardHogg]

My 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!

[Chan3377]

Thank Richard! It's working well

[Monmoy042]

I have got also the same problem. What is the best solution for this?

[Gabriel-Pereira1788]

Obrigado Ricardo! Está funcionando bem

npx server does not dynamically update on mine. is yours updating the changes in the project automatically?

[Jorge-Ortiz-M]

I updated my npm version from linux. You can type sudo npm update -g npm.
That fix the same issue. After updated the npm version, I created a react app npx create-react-app myapp, cd myapp and run the command npm start and it worked. I hope you can solve it.

[ChromeQ]

Duplicate of #11860 - that answer is bad, don't do that, see my comment on the answer in the stack overflow and also on the other issue

[Gretchenchen]

Here's the answer https://stackoverflow.com/questions/70469717/cant-load-a-react-app-after-starting-server

your a lifesaver

[fpadularrosa]

https://bobbyhadz.com/blog/deprecationwarning-onaftersetupmiddleware-option-is-deprecated
Your welcome, guys/girls

[ChromeQ]

Your write-up details editing node_modules files, this is a really bad idea and you mention it is temporary but you don't make enough of a point on this in my opinion. Ejecting is a non-reversable action which you don't mention. I'd question if it is really worth ejecting to get rid of a deprecation warning. Remember this is a deprecation WARNING so nothing is broken, and you can safely ignore it, and I'm sure create-react-app will update this in a future version.

If it really bothers you so much there are other solutions, patch-package is a better way to edit node_modules, you could also look into editing it via craco or customize-cra.

Please people, don't take the advise here. It is bad advise.

[dastan132]

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.

[Mehady05]

(node:14236) [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:14236) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

[ANTAR-NANDI]

add this in your package.json file
"overrides": {
"autoprefixer": "10.4.5"
}
npm install

[ANTAR-NANDI]

(node:14236) [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:14236) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

"overrides": {
"autoprefixer": "10.4.5"
}
npm install

[PranjayVats]

(node:14236) [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:14236) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

"overrides": { "autoprefixer": "10.4.5" } npm install

Though this is not working for me yet I want to know how you come up with this solution.

[DonRyu]

I think this guys solution is correct

https://www.youtube.com/watch?v=ifSTp9WEHpo

After I saw this youtube, problem is solved

[AthulKkumar]

run the command in the shell "npm update" it will work

[AthulKkumar]

(node:39133) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. [1] (Use node --trace-deprecation ... to show where the warning was created) [1] (node:39133) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

any solution for this warning?

use "npm update " command in the shell

[akashutosh77]

npm update worked for me

[renerlemes]

npm update or yarn upgrade not worked for me

[radthenone]

its funny, your tips not work when i have develop server automated create for all develops hidding node_modules, this is not a result

[MartinBarker]

Would you all stop spamming? What is the purpose of you writing that you have the same issue? Will that fix the issue quicker? Subscribe to the issue and shut up

I have the same issue

[FaroJoaoFaro]

I'm having the same warning too Any solution to this?

https://www.youtube.com/watch?v=ifSTp9WEHpo&ab_channel=DrVipinClasses

this solved it for me!! amazing and simple tutorial

[chnk8802]

I finally fixed this.If you are using yarn,just run yarn eject,then you should found '/config/webpackDevServer.config.js' file, Instead of onBeforeSetupMiddleware and onAfterSetupMiddleware, use the setupMiddlewares-property.Like this before:

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

after:

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

but it don't work when you host the server cuz you cant change it there as this must be done in node modules

[satya4satyanm]

I finally fixed this.If you are using yarn,just run yarn eject,then you should found '/config/webpackDevServer.config.js' file, Instead of onBeforeSetupMiddleware and onAfterSetupMiddleware, use the setupMiddlewares-property.Like this before:

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

after:

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

but it don't work when you host the server cuz you cant change it there as this must be done in node modules

How we will edit the code insode node-modules on deployment pipeline

[tamim-jr]

Follow this:
Go React Project file(my-app)> node_modile>react-scripts>config>webpackDevServer.config.js>then change this way:

DeprecationWarning Solution:

(node:2772) [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:2772)
[DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning:
'onBeforeSetupMiddleware'option is deprecated. Please use the 'setupMiddlewares' option.

Error code like this: (select and remove it)

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

},

Change to this: (past it on there)

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;

},

https://github.com/tamim-jr/onAfterSetupMiddleware-option-is-deprecated./blob/main/src/Solution.txt

[anhtuank7c]

I did npm remove react-scripts --force and then npm add -D react-scripts --force
🎉 it works.

[GCE333]

It seems like Create React App is dead and this issue will never be fixed. The best solution is to use Vite instead.

[JuntaoXu]

removing the following code from node_modules\react-scripts\config\webpackDevServer.config.js made the warning go away

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

[JohnMaxwellDistinti]

Hi 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! 👍