HMR Loads, but gives an error on reload

demo/server.js

@@ -21,14 +21,16 @@ const NODE_ENV = process.env.NODE_ENV || 'development';
 app.use(serveStatic(ROOT_DIR));
 app.use(serveStatic(STYLES_DIR));
 
+const compiler = webpack(WebpackConfig);
 app.use(
-  webpackDevMiddleware(webpack(WebpackConfig), {
+  webpackDevMiddleware(compiler, {
     publicPath: '/build/',
     stats: {
       colors: true,
     },
   })
 );
+app.use(require('webpack-hot-middleware')(compiler));
 
 const ITEMS = JSON.parse(fs.readFileSync(DATA));
 

demo/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const dir_demo_js = path.resolve(__dirname, 'js');
 const dir_demo_build = path.resolve(__dirname, 'build');
@@ -12,24 +13,41 @@ console.log(`Webpack demo ${isDevelopment ? 'dev' : 'prod'}`);
 
 module.exports = {
   target: 'node',
-  entry: path.resolve(dir_demo_js, 'demo.js'),
+  entry: [
+    'webpack-hot-middleware/client',
+    path.resolve(dir_demo_js, 'demo.js'),
+  ],
   output: {
     path: dir_demo_build,
     filename: 'demo.js',
     publicPath: 'build',
   },
   mode: isDevelopment ? 'development' : 'production',
-  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
+  plugins: [
+    // isDevelopment && new webpack.HotModuleReplacementPlugin(),
+    isDevelopment && new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
   devServer: {
     hot: true,
     contentBase: dir_demo_build,
   },
   module: {
     rules: [
-      // {
-      //   use: 'react-hot-loader/webpack',
-      //   test: dir_demo_js,
-      // },
+      {
+        test: dir_demo_js,
+        // test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              plugins: [
+                isDevelopment && require.resolve('react-refresh/babel'),
+              ].filter(Boolean),
+            },
+          },
+        ],
+      },
       {
         use: 'babel-loader',
         test: dir_demo_js,

package.json

@@ -50,7 +50,8 @@
     "styled-components": "^5",
     "webpack": "^5",
     "webpack-cli": "^4",
-    "webpack-dev-middleware": "^5"
+    "webpack-dev-middleware": "^5",
+    "webpack-hot-middleware": "^2.25.2"
   },
   "scripts": {
     "test": "jest",

webpack.config.js

@@ -53,9 +53,12 @@ const config = {
 };
 
 module.exports = (env, argv) => {
-  const isDevelopment = argv.mode !== 'production' && process.env.NODE_ENV !== 'production';
+  const isDevelopment =
+    argv.mode !== 'production' && process.env.NODE_ENV !== 'production';
   config.mode = isDevelopment ? 'development' : 'production';
-  config.plugins = [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean);
+  config.plugins = [
+    isDevelopment && new webpack.HotModuleReplacementPlugin(),
+  ].filter(Boolean);
   if (argv.mode === 'production') {
     config.output.path = dir_dist;
   }