fix: compatibility with webpack v5

README.md

@@ -23,11 +23,7 @@ Next, enable hot reloading in your webpack config:
  1. Add the following plugins to the `plugins` array:
     ```js
     plugins: [
-        // OccurrenceOrderPlugin is needed for webpack 1.x only
-        new webpack.optimize.OccurrenceOrderPlugin(),
         new webpack.HotModuleReplacementPlugin(),
-        // Use NoErrorsPlugin for webpack 1.x
-        new webpack.NoEmitOnErrorsPlugin()
     ]
     ```
 
@@ -47,7 +43,7 @@ Now add the middleware into your server:
     var compiler = webpack(webpackConfig);
 
     app.use(require("webpack-dev-middleware")(compiler, {
-        noInfo: true, publicPath: webpackConfig.output.publicPath
+        /* Options */
     }));
     ```
 

example/client.js

@@ -24,7 +24,7 @@ app.style.verticalAlign = 'middle';
 
 // Uncomment this next line to trigger a warning
 // require('Assert')
-require('assert');
+// require('assert');
 
 if (module.hot) {
   module.hot.accept();

example/package.json

@@ -8,11 +8,12 @@
     "console-stamp": "^0.2.9",
     "express": "^4.17.1",
     "morgan": "^1.10.0",
-    "webpack": "^4.46.0",
-    "webpack-dev-middleware": "^3.7.3",
+    "webpack": "^5.74.0",
+    "webpack-dev-middleware": "^5.3.3",
     "webpack-hot-middleware": "file:.."
   },
   "scripts": {
+    "start:base": "WEBPACK_CONFIG=./webpack.config.js node server.js",
     "start:multientry": "WEBPACK_CONFIG=./webpack.config.multientry.js node server.js"
   }
 }

example/server.js

@@ -22,7 +22,6 @@ app.use(require('morgan')('short'));
   // Step 2: Attach the dev middleware to the compiler & the server
   app.use(
     require('webpack-dev-middleware')(compiler, {
-      logLevel: 'warn',
       publicPath: webpackConfig.output.publicPath,
     })
   );

example/webpack.config.js

@@ -16,9 +16,6 @@ module.exports = {
     publicPath: '/',
     filename: 'bundle.js',
   },
-  devtool: '#source-map',
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-  ],
+  devtool: 'source-map',
+  plugins: [new webpack.HotModuleReplacementPlugin()],
 };

example/webpack.config.multientry.js

@@ -16,10 +16,6 @@ module.exports = {
     publicPath: '/',
     filename: '[name].js',
   },
-  devtool: '#source-map',
-  plugins: [
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-  ],
+  devtool: 'source-map',
+  plugins: [new webpack.HotModuleReplacementPlugin()],
 };

middleware.js

@@ -122,6 +122,8 @@ function publishStats(action, statsResult, eventStream, log) {
     modules: true,
     timings: true,
     hash: true,
+    errors: true,
+    warnings: true,
   };
 
   var bundles = [];
@@ -156,18 +158,34 @@ function publishStats(action, statsResult, eventStream, log) {
           'ms'
       );
     }
+
     eventStream.publish({
       name: name,
       action: action,
       time: stats.time,
       hash: stats.hash,
-      warnings: stats.warnings || [],
-      errors: stats.errors || [],
+      warnings: formatErrors(stats.warnings || []),
+      errors: formatErrors(stats.errors || []),
       modules: buildModuleMap(stats.modules),
     });
   });
 }
 
+function formatErrors(errors) {
+  if (!errors || !errors.length) {
+    return [];
+  }
+
+  if (typeof errors[0] === 'string') {
+    return errors;
+  }
+
+  // Convert webpack@5 error info into a backwards-compatible flat string
+  return errors.map(function (error) {
+    return error.moduleName + ' ' + error.loc + '\n' + error.message;
+  });
+}
+
 function normalizeStats(stats, statsOptions) {
   var statsJson = stats.toJson(statsOptions);