DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated

[tunaphamit]

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

[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]

Is this a duplicate of https://github.com/facebook/create-react-app/issues/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 https://github.com/facebook/create-react-app/issues/12035#issuecomment-1094592541, 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.

[rettimo]

Try removing node_modules and package-lock.json. This worked for me

[ffaauusstt]

Try removing node_modules and package-lock.json. This worked for me

man you saved my time. Thank you very much!

[alchemist0803]

I have fixed it. If you change package.json/react-script version to older one(in my case 4.0.3) then install node_module again, and it worked. I think that occurs becuase of dismatch of your node version and react-script version. So if you upgrade your node version or simply downgrade your react-script version, it works.

[ravshansbox]

I have fixed it. If you change package.json/react-script version to older one(in my case 4.0.3) then install node_module again, and it worked. I think that occurs becuase of dismatch of your node version and react-script version. So if you upgrade your node version or simply downgrade your react-script version, it works.

It's appearing because webpack deprecated it and CRA still using it

[BrainEno]

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

[Meligy]

Ideally you wouldn't want to eject though. You'd want something that you can apply with craco or a similar tool. I tried a few snippets from this issue and similar issues, and couldn't get it resolved.

[BrainEno]

Ideally you wouldn't want to eject though. You'd want something that you can apply with craco or a similar tool. I tried a few snippets from this issue and similar issues, and couldn't get it resolved.

yeah,you are correct!I haven't tried craco for now.I thought it would be good if cra team can change the code in webpack devServer config or expose some API for us to customize.

[bojkel]

I was having the same issue when trying to deploy a react app. I tried deployment services heroku and netlify, the same problem on both of them.

What fixed it for me is installing the serve package, building the project by running npm run build and replacing the npm start command with serve -s build instead of react-scripts start. Also of course removing the /build directory from .gitignore

This works locally too.

I'm not sure if its the best practice, but it works.

[BaniGrisson]

My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem?

One person mentioned it, but it's just one, so I'm wondering if its unrelated.

Anyone can confirm?

[BrainEno]

My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem?

One person mentioned it, but it's just one, so I'm wondering if its unrelated.

Anyone can confirm?

I have the same problem when running react with dotnet spa,It seems something related to sockets and proxy,I stuggled for a long time,didn't fixed it yet.

[BrainEno]

I find another temporary solution: 1.yarn add rewire; 2.make a start.js,and type

const rewire = require('rewire')
const defaults = rewire('./node_modules/react-scripts/scripts/start')

const serverConfig = defaults.__get__('createDevServerConfig')


serverConfig.onBeforeSetupMiddleware = null;
serverConfig.onAfterSetupMiddleware = null;

serverConfig.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.unshift(
        evalSourceMapMiddleware(devServer)
    )

    middlewares.push(
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
}

3.change package.json scripts.start to "start":"node start", that’s works for me.

[BaniGrisson]

My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem? One person mentioned it, but it's just one, so I'm wondering if its unrelated. Anyone can confirm?

I have the same problem when running react with dotnet spa,It seems something related to sockets and proxy,I stuggled for a long time,didn't fixed it yet.

I'm thinking it's related. It showed up at the same time as this error, they come from same node module, and at least three people here have the same problem.

[raina]

Try removing node_modules and package-lock.json. This worked for me

You're my hero today! I had a mismatch somewhere along the line and couldn't compile my site anymore, after deleting those two and re-running npm install everything is working again. Thank you!

[Meligy]

Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?

const rewire = require('rewire')
const defaults = rewire('./node_modules/react-scripts/scripts/start')

const serverConfig = defaults.__get__('createDevServerConfig')


serverConfig.onBeforeSetupMiddleware = null;
serverConfig.onAfterSetupMiddleware = null;

serverConfig.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.unshift(
        evalSourceMapMiddleware(devServer)
    )

    middlewares.push(
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
}

[p4cino]

Doesn't work watch on windows 11 and docker, same thing also occurs in nextjs (in nextjs it can be fixed by changing config). Anyone knows what is the reason?

[BrainEno]

Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?

const rewire = require('rewire')
const defaults = rewire('./node_modules/react-scripts/scripts/start')

const serverConfig = defaults.__get__('createDevServerConfig')


serverConfig.onBeforeSetupMiddleware = null;
serverConfig.onAfterSetupMiddleware = null;

serverConfig.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.unshift(
        evalSourceMapMiddleware(devServer)
    )

    middlewares.push(
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
}

I have tried using craco to override the devServer config,didn't work.craco force checking the onBeforeSetupMiddleware and onAfterSetupMiddware exist and should be instance of Function.I think it because carco itself depends the old version car.What version create-react-app are you using,I found @craco/carco itself depends on cra veresion 4.*,if you are using cra version 5,switch to other library instead of using craco may be a better choose.

[Meligy]

What version create-react-app are you using

For CRA 5 I'm using craco 7.0.0-alpha (currently 7.0.0-alpha.3).

[p4cino]

There is a simpler solution to the hotreload problem, if using docker on windows 11 then you have WSL (e.g. Ubuntu) Add your project there (rather than running from the windows folder) and docker-compose up. It works without any problems

[luis-neira]

Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?

const rewire = require('rewire')
const defaults = rewire('./node_modules/react-scripts/scripts/start')

const serverConfig = defaults.__get__('createDevServerConfig')


serverConfig.onBeforeSetupMiddleware = null;
serverConfig.onAfterSetupMiddleware = null;

serverConfig.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.unshift(
        evalSourceMapMiddleware(devServer)
    )

    middlewares.push(
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
}

I have tried using craco to override the devServer config,didn't work.craco force checking the onBeforeSetupMiddleware and onAfterSetupMiddware exist and should be instance of Function.I think it because carco itself depends the old version car.What version create-react-app are you using,I found @craco/carco itself depends on cra veresion 4.*,if you are using cra version 5,switch to other library instead of using craco may be a better choose.

CRACO Solution

For anyone using CRACO and is trying to override the devServer config, in order to resolve the DeprecationWarning, here is the solution.

import fs from "fs";

import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
import evalSourceMap from "react-dev-utils/evalSourceMapMiddleware";
import redirectServedPath from "react-dev-utils/redirectServedPathMiddleware";
import noopServiceWorker from "react-dev-utils/noopServiceWorkerMiddleware";

import type { CracoConfig } from "@craco/craco";

const config: CracoConfig = {
  webpack: {
    plugins: {
      add: [
        new NodePolyfillPlugin({
          excludeAliases: ["console"],
        }),
      ] /* An array of plugins */,
    },
  },
  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;
  },
};

export default config;

I hope this helps someone. Happy hacking : )

[scruzdatainfo]

Hi i am new using CRACO, how did you apply the suggested configuration to override the configuration?.

Sorry for the question but i cant figure out how to do this, I appreciate your help.

[regincastillo]

rewire 

Hi is this possible to do using react-app-rewired?If yes how? thanks

[scruzdatainfo]

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/[email protected]
  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

[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/[email protected]
  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/[email protected]
  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_SETUP_MIDDLEWARE] 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