DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated #12035

JackoPham · 2022-02-09T09:13:23Z

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.

The text was updated successfully, but these errors were encountered:

linzhipeng98 · 2022-02-10T07:24:08Z

#11860

Cyebukayire · 2022-03-10T05:31:36Z

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

johnnychengchj123 · 2022-03-10T11:19:09Z

me too

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

imransilvake · 2022-03-10T15:17:03Z

same issue

iiaan · 2022-03-10T19:54:10Z

i have the same problem

yousefalkhatibDev · 2022-03-11T14:11:41Z

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 · 2022-03-15T08:33:20Z

Same Error here.

ghost · 2022-03-15T13:54:02Z

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

gars150387 · 2022-03-17T00:31:13Z

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 · 2022-03-17T14:47:52Z

The same thing here after upgrade to ..... "react-scripts": "^5.0.0" (Node 16.*)

$ npm start

[email protected] 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 · 2022-03-25T00:11:38Z

Is this a duplicate of #11860 ?

gars150387 · 2022-03-25T04:37:44Z

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 · 2022-03-26T15:00:16Z

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 · 2022-03-27T03:28:13Z

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 · 2022-03-27T11:42:14Z

I am facing the same issue

kojidev · 2022-03-27T12:10:28Z

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 · 2022-03-30T12:57:05Z

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

Known issues: 1. `npm start` variable `BROWSER` is not working: facebook/create-react-app#11873 2. `[DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Ple ase use the 'setupMiddlewares' option.`: facebook/create-react-app#12035

SwatiTParshuramkar · 2022-04-08T04:21:46Z

(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 · 2022-04-08T08:33:53Z

I have the same issue

dear983604 · 2022-04-09T08:17:38Z

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 · 2022-04-11T06:13:43Z

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

SwatiTParshuramkar · 2022-04-14T05:23:58Z

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 · 2022-04-14T06:38:25Z

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 · 2022-04-17T20:39:17Z

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 · 2022-04-23T09:15:30Z

Thank Richard! It's working well

Monmoy042 · 2022-05-10T14:00:39Z

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

Gabriel-Pereira1788 · 2022-05-14T14:26:56Z

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 · 2022-05-17T20:11:29Z

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.

ANTAR-NANDI · 2023-02-28T19:56:43Z

(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 · 2023-03-01T05:54:00Z

(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 · 2023-03-30T00:40:09Z

I think this guys solution is correct

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

After I saw this youtube, problem is solved

AthulKkumar · 2023-03-30T06:59:29Z

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

AthulKkumar · 2023-03-30T07:01:28Z

(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 · 2023-04-08T03:09:30Z

npm update worked for me

renerlemes · 2023-04-16T21:21:41Z

npm update or yarn upgrade not worked for me

radthenone · 2023-04-18T11:34:41Z

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 · 2023-06-20T03:05:48Z

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 · 2023-07-12T17:14:33Z

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 but its modifying on the node modules :/

chnk8802 · 2023-07-14T18:58:13Z

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 · 2023-08-23T11:03:47Z

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

TamimMahmudBD · 2023-09-06T19:27:39Z

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 · 2023-10-04T09:42:36Z

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

GCE333 · 2024-01-05T06:58:33Z

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

JEANTAYLON · 2024-03-01T02:58:09Z

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 · 2024-03-03T03:15:37Z

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

ParuchuriAmitha · 2024-06-06T10:48:14Z

I 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 code

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.
// #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;
}

ruthyankson · 2024-06-15T02:13:34Z

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

kitsanapong · 2024-06-28T07:34:36Z

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

fabiopasilva1 · 2024-09-08T04:15:30Z

Finalmente 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

ananya-singh-afk · 2024-10-09T03:10:51Z

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?

ananya-singh-afk · 2024-10-09T03:11:34Z

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!

great thanks!

Soloctg · 2025-01-08T10:15:43Z

just install webvital by
npm install web-vitals

Soloctg · 2025-01-08T10:16:13Z

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?

npm install web-vitals

00hello mentioned this issue Mar 6, 2023

DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated grasslandnetwork/grassland#16

Open

katataku mentioned this issue Mar 25, 2023

[BUG]DeprecationWarning katataku/ft_transcendence#281

Closed

DannySS123 mentioned this issue Jun 21, 2023

DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. kir-dev/konzisite-frontend#295

Open

marcoandre1 mentioned this issue Feb 18, 2024

[BUG]: DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated marcoandre1/marcoandre1.github.io#175

Open

1fifoto mentioned this issue Aug 18, 2024

Transient error message in command window after "npm start" thegrumpys/odop#923

Closed

DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated #12035

DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated #12035

Comments

JackoPham commented Feb 9, 2022

linzhipeng98 commented Feb 10, 2022

Cyebukayire commented Mar 10, 2022

johnnychengchj123 commented Mar 10, 2022

imransilvake commented Mar 10, 2022

iiaan commented Mar 10, 2022

yousefalkhatibDev commented Mar 11, 2022

khizar-hayyat-72 commented Mar 15, 2022

ghost commented Mar 15, 2022

gars150387 commented Mar 17, 2022

oxicot commented Mar 17, 2022

webpack 5.70.0 compiled successfully in 18347 ms

nspool commented Mar 25, 2022

gars150387 commented Mar 25, 2022

HaseebullahMemon commented Mar 26, 2022

SohelTanbir commented Mar 27, 2022

anveshiano commented Mar 27, 2022

kojidev commented Mar 27, 2022

alekennedy commented Mar 30, 2022

SwatiTParshuramkar commented Apr 8, 2022

RussellOsiemo commented Apr 8, 2022

dear983604 commented Apr 9, 2022

FrancescoVarsallona commented Apr 11, 2022 • edited Loading

SwatiTParshuramkar commented Apr 14, 2022 via email

MSSPL-KamalenduGarai commented Apr 14, 2022

RichardHogg commented Apr 17, 2022

Chan3377 commented Apr 23, 2022

Monmoy042 commented May 10, 2022

Gabriel-Pereira1788 commented May 14, 2022

Jorge-Ortiz-M commented May 17, 2022 • edited Loading

ANTAR-NANDI commented Feb 28, 2023

PranjayVats commented Mar 1, 2023

DonRyu commented Mar 30, 2023

AthulKkumar commented Mar 30, 2023

AthulKkumar commented Mar 30, 2023

akashutosh77 commented Apr 8, 2023

renerlemes commented Apr 16, 2023

radthenone commented Apr 18, 2023

MartinBarker commented Jun 20, 2023

FaroJoaoFaro commented Jul 12, 2023 • edited Loading

chnk8802 commented Jul 14, 2023

satya4satyanm commented Aug 23, 2023

TamimMahmudBD commented Sep 6, 2023

anhtuank7c commented Oct 4, 2023

GCE333 commented Jan 5, 2024

JEANTAYLON commented Mar 1, 2024 • edited Loading

JohnMaxwellDistinti commented Mar 3, 2024 • edited Loading

ParuchuriAmitha commented Jun 6, 2024

ruthyankson commented Jun 15, 2024 • edited Loading

kitsanapong commented Jun 28, 2024 • edited Loading

fabiopasilva1 commented Sep 8, 2024

ananya-singh-afk commented Oct 9, 2024

ananya-singh-afk commented Oct 9, 2024

Soloctg commented Jan 8, 2025

Soloctg commented Jan 8, 2025

FrancescoVarsallona commented Apr 11, 2022 •

edited

Loading

Jorge-Ortiz-M commented May 17, 2022 •

edited

Loading

FaroJoaoFaro commented Jul 12, 2023 •

edited

Loading

JEANTAYLON commented Mar 1, 2024 •

edited

Loading

JohnMaxwellDistinti commented Mar 3, 2024 •

edited

Loading

ruthyankson commented Jun 15, 2024 •

edited

Loading

kitsanapong commented Jun 28, 2024 •

edited

Loading