not working well with webpack 4 and happypack

[sibelius]

"webpack": "^4.12.0",
    "webpack-cli": "3.0.8",
    "webpack-serve": "1.0.4",
    "webpack-serve-waitpage": "1.0.0"
    "react-hot-loader": "^4.3.3",

webpack.config.js

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotEnv = require('dotenv-webpack');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HappyPack = require('happypack');
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');
const webpackServeWaitpage = require('webpack-serve-waitpage');

const HOST = process.env.HOST;
const PORT = process.env.PORT;

module.exports = {
  mode: 'development',
  context: path.resolve(__dirname, './'),
  entry: './src/index.js',
  devtool: 'eval-source-map',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: [/node_modules/],
        use: 'happypack/loader?id=js',
        include: path.join(__dirname, 'src'),
      },
      {
        test: /\.(jpe?g|png|gif|svg|pdf|csv)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'img/',
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: 'happypack/loader?id=styles',
      },
    ],
  },
  serve: {
    content: [__dirname],
    port: PORT,
    host: HOST,
    logLevel: 'debug', // default is info
    add: (app, middleware, options) => {
      app.use(
        webpackServeWaitpage(options, {
          title: 'Entria Tech Team',
          theme: 'material',
        }),
      );

      // see: https://github.com/bripkens/connect-history-api-fallback#options
      app.use(
        convert(
          history({
            disableDotRule: true,
            htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
          }),
        ),
      );
    },
    dev: {
      logLevel: 'debug',
      stats: {
        assets: true,
        colors: true,
        version: false,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
      },
    },
  },
  plugins: [
    new dotEnv({
      path: './.env',
    }),
    new HappyPack({
      id: 'js',
      threads: 4,
      // https://github.com/babel/babel-loader#options
      loaders: ['babel-loader?cacheDirectory'],
    }),
    new HappyPack({
      id: 'styles',
      threads: 2,
      loaders: ['style-loader', 'css-loader'],
    }),
    new FaviconsWebpackPlugin('./src/static/favicon.png'),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      chunksSortMode: 'none',
    }), 
  ],
};

When I change a single file, it keeps on [hot]: webpack Compiling forever, like the image below

how can I debug this?

My root components have this

export default hot(module)(MyComponent)

[sibelius]

wrong repo