How to fix Webpack Dev Server HMR using WSL 2 (TypeScript)

webpack.config.ts

import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config = (): Configuration => ({
  mode: "development",
  entry: path.resolve(__dirname, "src", "index.tsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  devServer: {
    static: './dist',
  },
  /* 
   * From webpack docs
   * If watching does not work for you, try out this option. 
   * This may help issues with NFS and machines in VirtualBox, WSL, Containers, or Docker. 
   * In those cases, use a polling interval and ignore large folders like /node_modules/ to keep CPU usage minimal.
   */
  watchOptions: {
    poll: 1000 
  },
  module: {
    rules: [{
      test: /\.(ts|js)x?$/i,
      exclude: [/node_modules/, /\.(spec|test).(ts|js)x?$/i],
      loader: "babel-loader",
      options: {
        cacheDirectory: true,
        cacheCompression: false,
        compact: true,
      }
    }],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    alias: {
      src: path.resolve(__dirname, "src"),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "React App",
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
})

export default config;