3

Every time i create a project with npx create-react-app AppName, when i run the project in the local server, i get the below warnings.

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

i can toggle off the warnings with modifying local files as webPackDevServer.config.js file in node_modules folder as detailed here. But i couldnt find any permanent solution. Is there any permanent solution to solve this issue?

cem
  • 311
  • 1
  • 9

3 Answers3

1

this is an open issue in create-react-app .

one way not to solve it but to avoid these warnings :

1 - run npm run build : this will create a build directory with a production build of your app

2- run npm install -g serve : to serve your build directory with a static server .

3 - run npx serve -s build instead of npm start

monim
  • 3,641
  • 2
  • 10
  • 25
0

As @monim suggested this is an open issue in github.

These can be still solved by some work around.

Using CRACO

1. install modules using npm

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

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

3. configure your package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0

In your client-frontend/node_modules/react_scripts/config/webpackDevServer.js remove 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));
    },

And replace it with this.

    setupMiddlewares: (middlewares, devServer) => {
      if(!devServer){
        throw new Error("webpack-dev-server is not defined")
      }
  
      if (fs.existsSync(paths.proxySetup)) {
        require(path.proxySetup) (devServer.app)
      }
  
      middlewares.push(
        evalSourceMapMiddleware(devServer),
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
      )
      return middlewares
    }
Wilmer Rivera
  • 1