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_SETUPMIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

[luis-neira]

ok, i figure it out. If your are NOT using typescript this is the solution suggested by luis, using CRACO:

install modules using npm:

  npm i @craco/craco@7.0.0-alpha.3
  npm i node-polyfill-webpack-plugin

Create craco.config.js file on root directory, whit this code:

const fs = require("fs");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const evalSourceMap = require("react-dev-utils/evalSourceMapMiddleware");
const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
const noopServiceWorker = require("react-dev-utils/noopServiceWorkerMiddleware");
module.exports = {
  webpack: {
    plugins: {
      add: [
        new NodePolyfillPlugin({
          excludeAliases: ["console"],
        }),
      ],
    },
  },
  devServer: (devServerConfig, { env, paths }) => {
    devServerConfig = {
      onBeforeSetupMiddleware: undefined,
      onAfterSetupMiddleware: undefined,
      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(
          evalSourceMap(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorker(paths.publicUrlOrPath)
        );
        return middlewares;
      },
    };
    return devServerConfig;
  },
};

configure your package.json:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

And the waring is gone

Sorry I took a while to reply. I'm glad you figured it out.

[OneTuskedMario]

ok, i figure it out. If your are NOT using typescript this is the solution suggested by luis, using CRACO:

install modules using npm:

  npm i @craco/craco@7.0.0-alpha.3
  npm i node-polyfill-webpack-plugin

Create craco.config.js file on root directory, whit this code:

const fs = require("fs");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const evalSourceMap = require("react-dev-utils/evalSourceMapMiddleware");
const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
const noopServiceWorker = require("react-dev-utils/noopServiceWorkerMiddleware");
module.exports = {
  webpack: {
    plugins: {
      add: [
        new NodePolyfillPlugin({
          excludeAliases: ["console"],
        }),
      ],
    },
  },
  devServer: (devServerConfig, { env, paths }) => {
    devServerConfig = {
      onBeforeSetupMiddleware: undefined,
      onAfterSetupMiddleware: undefined,
      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(
          evalSourceMap(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorker(paths.publicUrlOrPath)
        );
        return middlewares;
      },
    };
    return devServerConfig;
  },
};

configure your package.json:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

And the waring is gone

This worked for me on craco 6.4.3 in a typescript project.

[lecoqlibre]

Is this issue has been fixed yet? Can we use React 18 and react scripts 5.0.1? When I tried to use these today, the server is not listening and I still got the deprecated warnings!

[abhinav231-valisetti]

Tried changing the names in webpackDevServer.config.js it worked for me.

1) Open node_modules folder. 2) Search for webpackDevServer.config.js. 3) Open the js file and edit it.

[PranjayVats]

webpackDevServer.config.js

Can you please elaborate on it more? Like where to find webpackDevServer.config.js as I searched for it but did not find it. And what to edit in it.

[sorinpav]

@PranjayVats what he probably means is to modify your webpack.config.js file to solve the warnings. However, if you're using Create-React-App with your project and you haven't ejected your project, that file is inaccessible unfortunately. Make sure you know what you're doing if you eject, as that process is irreversible.

[Chris-N]

I have the same occurring issue. In reading all the comments this https://github.com/facebook/create-react-app/issues/12035#issuecomment-1131137178 resolved my issue. I applied the new code to the webpackDevServer.config.js without using yarn eject. Curious why it's even suggested to eject though?

[PranjayVats]

/config/webpackDevServer.config.js

Is it for 'yarn' only or can it be used for the 'npm' project? As I am using 'npm' in my project, what should I do?

[LuckyWebTech]

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_SETUPMIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

Same Error here, and I've been ignoring that.

[Kelechiokpani]

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!

thank you this worked for me

[sgupta-1]

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

Best Solution

[Eng-Fouad]

It seems this issue will be fixed in next release 5.0.2 (#11862)

[Meligy]

It seems this issue will be fixed in next release 5.0.2 (#11862)

I wouldn't be so sure, as this PR has been left for quite a while

[LBR474]

Ok, collating a lot of the much higher level answers above, the steps that worked for me were/are: (and please note, I am very new to all this, so struggling to understand it myself)

1. Go to node-modules folder of your React folder (mine is called React-Three).

2. Once you've opened node-modules folder, scroll down to the react-scripts folder.

3. Open the config folder in react-scripts

4. Open the webpackDevServer.config.js file, then (using sgupta-1's answer above), go down to the very end of the file and change this:

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

to this:

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

6. Once you've made your changes, save a copy of the newly changed webpackDevServer.config.js file somewhere outside your root folder, because......, I don't know if it's just me, but every time I did a yarn add, or an npm update, it picked up the old file and the deprecation warning came back, so by having a saved copy, you can just paste it back in any time you need it.

[raselinfo]

same problem I also faced

[Ranjankumar666]

ok, i figure it out. If your are NOT using typescript this is the solution suggested by luis, using CRACO:

install modules using npm:

  npm i @craco/craco@7.0.0-alpha.3
  npm i node-polyfill-webpack-plugin

Create craco.config.js file on root directory, whit this code:

const fs = require("fs");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const evalSourceMap = require("react-dev-utils/evalSourceMapMiddleware");
const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
const noopServiceWorker = require("react-dev-utils/noopServiceWorkerMiddleware");
module.exports = {
  webpack: {
    plugins: {
      add: [
        new NodePolyfillPlugin({
          excludeAliases: ["console"],
        }),
      ],
    },
  },
  devServer: (devServerConfig, { env, paths }) => {
    devServerConfig = {
      onBeforeSetupMiddleware: undefined,
      onAfterSetupMiddleware: undefined,
      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(
          evalSourceMap(devServer),
          redirectServedPath(paths.publicUrlOrPath),
          noopServiceWorker(paths.publicUrlOrPath)
        );
        return middlewares;
      },
    };
    return devServerConfig;
  },
};

configure your package.json:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

And the waring is gone

for Typescript ?

[MSSPL-KamalenduGarai]

This is great. I did not know about craco I have tried with the predecessors i.e. react-app-rewired, rewire earlier. I will give it a shot, but does typescript does matter to this because as I understand these kind of tools just extend or override functionalities, so if we do not update js / ts compilation part then it should work fine.

[iahunicorn]

Configure webpack.config.js in the root of application folder using this:

https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares

[jokri215]

the solution is resolved by sgupta-1! Very well, thanks a lot!

[Sergio47is2022]

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

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

[SwatiTParshuramkar]

searching what exactly error and how to debug with

On Tue, May 10, 2022, 7:30 PM Khaled Md. Saifullah @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/12035#issuecomment-1122438120, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATBEWHGOFS2WFTBDB3JABZTVJJTZRANCNFSM5N4363XA . You are receiving this because you commented.Message ID: @.***>

[unixelias]

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

This worked for me. Upgrading ejected create-react-app to react 18

[Ajioz]

Tried changing the names in webpackDevServer.config.js it worked for me.

1. Open node_modules folder.
2. Search for webpackDevServer.config.js.
3. Open the js file and edit it.

Edit what precisely?

[rmoorman]

I have been successful in solving this issue over here by using the approach outlined by @scruzdatainfo here combined with the information over here by @chris-dyke.

Apparently using a src/setupProxy.js configuration to setup some proxying to a dev backend caused me having to take a few extra steps. I hope this helps someone.

[nmhummel]

CRACO post The craco option worked great. Keep in mind if you have "type":"module" in your package.json you will need to remove it.

[Nodirbekamanjanovich]

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

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

[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

[TamimMahmudBD]

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