Webpack-dev-server: Invalid configuration object (configuration.plugins)

[modestotech]

• Operating System: Windows 7
• Node Version: 10.13.0
• NPM Version: 6.5.0
• webpack Version: 4.20.2
• webpack-dev-server Version: 3.1.14

• [x] This is a bug
• [ ] This is a modification request

Code

See this gist.

Expected Behavior

Use npm run start (webpack-dev-server --mode development) to get webpack-dev-server up and running. npm run build works fine.

Actual Behavior

When I run ´npm run build´ I get the following output:

 ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[2] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[2] should be an object.
      -> Plugin instance
    * configuration.plugins[2] should be an instance of function
      -> Function acting as plugin

For Bugs; How can we reproduce the behavior?

See the gist and come back with questions.

[alexander-akait]

You have invalid configuration

plugins: [
    isInProductionMode && new MiniCssExtractPlugin({
      filename: '[name].styles.[chunkhash:4].css',
    }),
  ],

rewrite this on

plugins: [].concat(
    isInProductionMode 
    ? [
        new MiniCssExtractPlugin({
            filename: '[name].styles.[chunkhash:4].css',
        })] 
    : [])
  ],