title: Issue with ReactRefreshWebpackPlugin and WebpackPluginServe - changes visible only after page refresh
body: <p>I have issue, I always worked with webpack-dev-server and react-hot-dom, but after webpack5 it stopped working.
  Unfortunetly after running webpack--watch, react not &quot;live refresh&quot; with above configuration, but after page refresh - all changes are visible. Is that problem with ReactRefreshWebpackPlugin which is not production ready? Or maybe because of wsl2?</p>
  <p>Webpack.config:</p>
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  const { WebpackPluginServe: ServePlugin } = require('webpack-plugin-serve');
  
  const outputPath = path.resolve(__dirname, 'build');
  
  module.exports = {
    mode: 'development',
    watch: true,
    entry: {
      main: ['webpack-plugin-serve/client', './src/index.tsx'],
    },
    output: {
      path: outputPath,
      filename: 'bundle.[contenthash].js',
      publicPath: '/',
    },
    module: {
      rules: [
        {
          test: /\.(j|t)sx?$/,
          include: path.join(__dirname, 'src'),
          use: &quot;babel-loader&quot;,
        }, {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    plugins: [
      new ServePlugin({
        static: outputPath,
        status: true,
      }),
      new ReactRefreshWebpackPlugin({
        overlay: {
          sockIntegration: 'wps',
        },
      }),
      new HtmlWebpackPlugin({
        title: &quot;Pixelart&quot;,
        template: './index.html',
      })
    ],
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    }
  };
  </code></pre>
  <p>babel.config</p>
  <pre><code>module.exports = (api) =&gt; {
      // This caches the Babel config
      api.cache.using(() =&gt; process.env.NODE_ENV);
      return {
          presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
          // Applies the react-refresh Babel plugin on non-production modes only
          plugins: ['react-refresh/babel']
      };
  };
  </code></pre>