webpack-hot-client issue

webpack.config.js

/* eslint-disable import/no-commonjs */

const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPluginTemplate = require('html-webpack-template')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const {resolve} = require('path')

module.exports = (_, {mode = 'development'} = {}) => {
  const isProduction = mode === 'production'

  const src = resolve(__dirname, 'src')

  const config = {
    mode,
    entry: {
      ['vendor-css']: [
        './node_modules/normalize.css/normalize.css',
        './node_modules/@blueprintjs/core/lib/css/blueprint.css',
      ],
      main: ['./src'],
    },
    plugins: [
      new ExtractCssChunksPlugin({
        filename: isProduction ? '[name].[contenthash].css' : '[name].css',
        hot: !isProduction,
      }),
      new HtmlPlugin({
        title: 'Webpack experiments',
        lang: 'en-US',
        inject: false,
        template: htmlPluginTemplate,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          include: [src],
          use: 'babel-loader',
        },
        {
          test: /\.scss$/,
          use: [
            ExtractCssChunksPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
            'source-map-loader',
          ],
        },
        {
          test: /\.css$/,
          use: [
            ExtractCssChunksPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            'source-map-loader',
          ],
        },
      ],
    },
    devtool: 'source-map',
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          ['vendor-css']: {
            name: 'vendor-css',
            chunks: 'all',
            enforce: true,
            test: module => module.constructor.name === 'CssModule' && moduleEntrypoint(module) === 'vendor-css',
          },
        },
      },
    },
    output: {
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
    },
  }

  if (isProduction) {
    config.plugins.push(new OptimizeCssAssetsPlugin({
      cssProcessorOptions: {
        map: {
          inline: false,
          annotation: true,
        },
      },
    }))

    config.performance = {
      maxAssetSize: 250 * 1024,
      maxEntrypointSize: 250 * 1024,
    }
  }

  return config
}

function moduleEntrypoint ({issuer, name}) {
  if (issuer) return moduleEntrypoint(issuer)
  if (name) return name

  return false
}