[webpack-dev-middleware] ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.

[Андрій]

Bug report

Actual Behavior

If I export multiple configurations, as described here
https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations
and run webpack serve
I see this error

And watching for files changing does not work!

webpack.config.js is very simple

const path = require('path');

module.exports = [
  {
    mode: 'development',
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist/default/'),
    },
    devtool: 'inline-source-map',
    devServer: {
      static: './dist/default',
    },
  },
  {
    mode: 'development',
    entry: './src/admin.js',
    output: {
      filename: 'admin.js',
      path: path.resolve(__dirname, 'dist/admin/'),
    },
    devtool: 'inline-source-map',
    devServer: {
      static: './dist/admin',
    },
  }
];

Expected Behavior

The webpack dev server is running and watches after file changing and always serve the most recent compiled content.

[Aditya Thakral]

Can repro 👍

    "webpack": "5.88.2",
    "webpack-cli": "5.1.4",
    "webpack-dev-server": "4.15.1"

[Kevin Yank]

Looks like a dupe of webpack/webpack-cli#3666, although that one didn't mention that watching for file changes was broken.

[Kevin Yank]

I believe this is actually a misconfiguration.

Per webpack/webpack-cli#2408 (comment), the correct way to configure webpack-dev-server in a multi-config setup is to add the devServer block only to the first config:

const path = require('path');

module.exports = [
  {
    entry: './src/index.js',
    ⋮
    devServer: {
      static: './dist/default',
    },
  },
  {
    entry: './src/admin.js',
    ⋮
  }
];

The one instance of webpack-dev-server will serve files for both of your configurations! This is very convenient, but it does present challenges if you want devServer to be configured differently for each of your webpack configs (e.g. in @gonandriy's case above, having different static values). This does not appear to be possible, except by running entirely separate processes for each webpack-dev-server, using the --config-name flag to select which configuration to run for each.

[Alexander Akait]

Close in favor webpack/webpack-cli#2408, we are still working on it, current solution is using #4947 (comment)