[Fix] DeprecationWarning ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option

The warning “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”, is a warning that is invoked when you are working on a react app. Given below is the snippet of the error you might get:

DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option

I would like to share with you the steps I took to fix the “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”

Why “DeprecationWarning ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option” Warning is Seen?

The warning, “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option” is seen because, you have to start using a new way of configuring the middleware into your project.

Rather than using onBeforeSetupMiddleware and onAfterSetupMiddleware, you should start using setupMiddlewares-property. You can read more about it in the webpack’s website documentation here.

devServer.setupMiddlewares Definition and Example:

function (middlewares, devServer)

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });

      // Use the `unshift` method if you want to run a middleware before all other middlewares
      // or when you are migrating from the `onBeforeSetupMiddleware` option
      middlewares.unshift({
        name: 'fist-in-array',
        // `path` is optional
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // Use the `push` method if you want to run a middleware after all other middlewares
      // or when you are migrating from the `onAfterSetupMiddleware` option
      middlewares.push({
        name: 'hello-world-test-one',
        // `path` is optional
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      middlewares.push((req, res) => {
        res.send('Hello World!');
      });

      return middlewares;
    },
  },
};

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

The issue can also be caused because of a problem with the setupProxy.js. Since onAfterSetupMiddleware and onBeforeSetupMiddleware have been deprecated, this is the reason why the proxy method is not working as expected.

Therefore, the browser tries to redirect to the proxy URL when you start the server using npm start. 

The detailed solution to fix the warning “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”, is given below:

How to fix “DeprecationWarning ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option” warning?

To fix the warning, you will have to start using setupMiddlewares-property, Rather than using onBeforeSetupMiddleware and onAfterSetupMiddleware. Alternatively you can also try to change your setupProxy.js to work with the old properties without prompting the error.

To fix the warning, “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”, you will have to follow the one of the methods mentioned below:

Method 1: Change your middleware configuration

To fix the error you will have to start using setupMiddlewares-property, Rather than using onBeforeSetupMiddleware and onAfterSetupMiddleware.

The new configuration should look like something mentioned below:

setupMiddlewares: (middlewares, devServer) => {
    middleware1(devServer.app)
    middleware2(devServer.app)

    return middlewares
},

This should fix the warning “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”.

Method 2: Change your setupProxy.js

To fix the error you will have to set your setupProxy.js properly. For your reference your old setupProxy.js will look something like below mentioned:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/proxypath', { target: '<target path>' }));
};

You will have to change it to the below mentioned:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('/proxypath', { target: '<target path>' }));
};

This should fix the warning “DeprecationWarning: ‘onBeforeSetupMiddleware’

Conclusion

To fix the warning “DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option”, you will have to start using setupMiddlewares-property, Rather than using onBeforeSetupMiddleware and onAfterSetupMiddleware.

Alternatively you can also try to change your setupProxy.js to work with the old properties without prompting the error.