search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.44k stars 26.76k forks source link

DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated #12035

Open JackoPham opened 2 years ago

JackoPham commented 2 years ago

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.

linzhipeng98 commented 2 years ago

11860

Cyebukayire commented 2 years ago

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

johnnychengchj123 commented 2 years ago

me too

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

imransilvake commented 2 years ago

same issue

iiaan commented 2 years ago

i have the same problem

yousefalkhatibDev commented 2 years ago

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 commented 2 years ago

Same Error here.

ghost commented 2 years ago

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

gars150387 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Is this a duplicate of https://github.com/facebook/create-react-app/issues/11860 ?

gars150387 commented 2 years ago

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

HaseebullahMemon commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

I am facing the same issue

kojidev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

(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 commented 2 years ago

I have the same issue

dear983604 commented 2 years ago

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

What did you do?

FrancescoVarsallona commented 2 years ago

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

SwatiTParshuramkar commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Thank Richard! It's working well

Monmoy042 commented 2 years ago

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

Gabriel-Pereira1788 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

ffaauusstt commented 2 years ago

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

man you saved my time. Thank you very much!

vladengineerr commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago 
rewire

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

scruzdatainfo commented 2 years ago

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 imagen