Skip to main content

How to Resolve "onAfterSetupMiddleware is deprecated" Warning in Webpack

If you are seeing the deprecation warning [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated, it means your project (or one of its dependencies, like react-scripts) is using an outdated configuration for the webpack-dev-server. This warning is common in projects created with older versions of Create React App.

This guide will explain the cause of this warning and provide a clear, step-by-step solution to fix it by updating your project's configuration to use the modern setupMiddlewares option.

The Core Problem: Deprecated webpack-dev-server Options​

The webpack-dev-server library, which is used by tools like Create React App to provide a live development server, updated its configuration API. The older onBeforeSetupMiddleware and onAfterSetupMiddleware options were replaced by a single, more flexible setupMiddlewares function.

The warning message is simply informing you that your project is still using the old names.

(node:...) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 
'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

The Solution for Create React App: Updating react-scripts​

For most Create React App projects, this issue is caused by an outdated version of the react-scripts package. The official fix is to upgrade to react-scripts version 5.0.1 or newer, where this has been resolved.

Step 1: Check Your react-scripts Version​

Look in your package.json file and find the version for react-scripts.

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.0", // This version has the issue
  ...
}

Step 2: Update the Package​

Run the following command in your terminal to update react-scripts to the latest version.

npm install react-scripts@latest

Step 3: Reinstall and Restart​

After updating the package, it's a good practice to clear your old modules and do a clean install.

# Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# Reinstall all packages
npm install

# Start your development server
npm start

The warning should now be gone. This is the recommended best practice and the official solution.

The Manual Fix (For Ejected or Custom Configs)​

If you have an "ejected" Create React App project or a custom Webpack configuration, you will need to edit the webpackDevServer.config.js file yourself.

For example, you will find a configuration file (e.g., config/webpackDevServer.config.js) containing these deprecated keys:

// ⛔️ This is the old, deprecated code
module.exports = {
  // ... other config
  onBeforeSetupMiddleware(devServer) {
    // ... middleware logic
  },
  onAfterSetupMiddleware(devServer) {
    // ... other middleware logic
  },
};

As solution, you need to replace those two functions with a single setupMiddlewares function.

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

    // Your old middleware logic goes here, pushed into the `middlewares` array.
    // The order is important.
    
    // Logic from the old onBeforeSetupMiddleware
    if (fs.existsSync(paths.proxySetup)) {
      require(paths.proxySetup)(devServer.app);
    }
    middlewares.unshift(evalSourceMapMiddleware(devServer));

    // Logic from the old onAfterSetupMiddleware
    middlewares.push(redirectServedPath(paths.publicUrlOrPath));
    middlewares.push(noopServiceWorkerMiddleware(paths.publicUrlOrPath));

    return middlewares;
  },
};

After making this change, restart your development server. The warning will be resolved.

Why Manually Editing node_modules is Not a Good Solution​

Some guides suggest finding the webpackDevServer.config.js file inside your node_modules/react-scripts folder and editing it directly. You should not do this.

Any changes you make inside the node_modules directory are temporary. They will be wiped out the next time you run npm install, another developer clones the project, or your CI/CD pipeline builds the application. This is not a permanent or shareable solution.

Conclusion​

The onAfterSetupMiddleware deprecation warning is a common issue for projects running older versions of react-scripts or webpack-dev-server.

  • The best and most direct solution for Create React App users is to upgrade the react-scripts package to version 5.0.1 or newer.
  • For ejected or custom configurations, you must manually edit your webpackDevServer.config.js file to replace the old onBeforeSetupMiddleware and onAfterSetupMiddleware functions with the new setupMiddlewares function.
  • Never edit files inside node_modules directly, as these changes are not permanent.

Table of Contents