Webpack "devServer.*" options unable to be customized

[dannobytes]

Current behavior

After upgrading to v12, webpack@5 now by default enables the devServer.client.overlay option, which shows a blocking modal whenever a compilation warning or error occurs. This is very obstructive, and we should be able to easily modify this by overriding the option. In addition, progress is disabled, and we should be able to turn this on.

// styleguide.config.js
{
  ...,
  webpackConfig: {
    devServer: {
      // Turn overlays off. Enable progress indicator.
      client: { overlay: false, progress: true },
    },
  }
}

However, these configs are not making their way to the webpack dev server. I tracked it down to the sequence of how the internal webpack dev config was being shallowly merged:

react-styleguidist/src/scripts/create-server.ts

Lines 36 to 39 in a460fcc

	const webpackDevServerConfig: Configuration = {
	...webpackConfig.devServer,
	...baseConfig,
	};

Because the baseConfig contains a client field, it's always overwriting what's being passed through from ...webpackConfig.devServer.

Solution

A simple fix would be reorder this to ensure the baseConfig is applied first, while merging onto it the webpackConfig.devServer, e.g.

	const webpackDevServerConfig: Configuration = {
		...baseConfig,
		...webpackConfig.devServer,
	};

This would ensure our options from the styleguide.config file were being passed through.

Expected behavior

When overriding webpack.devServer.client options, they should be passed through so I can enable progress and/or turn off overlays.