Update to webpack-dev-server 5

catalog.json

@@ -19,5 +19,7 @@
   "typescript": "^5.9.2",
   "vite": "^6.3.3",
   "vitest": "^3.2.4",
-  "wait-on": "^9.0.4"
+  "wait-on": "^9.0.4",
+  "webpack": "5.105.4",
+  "webpack-dev-server": "^5.2.3"
 }

packages/volto-razzle-dev-utils/news/+dep-webpack.breaking

@@ -0,0 +1 @@
+Drop support for webpack 4 and webpack-dev-server 4. @davisagli

packages/volto-razzle-dev-utils/package.json

@@ -17,7 +17,6 @@
     "FriendlyErrorsPlugin.js",
     "FileSizeReporter.js",
     "webpackHotDevClient.js",
-    "webpackHotDevClientV4.js",
     "setPorts.js",
     "makeLoaderFinder.js",
     "WebpackConfigHelpers.js",
@@ -38,12 +37,11 @@
     "react-error-overlay": "^6.0.7",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.17.0",
-    "sockjs-client": "~1.4.0",
     "strip-ansi": "^6.0.0"
   },
   "peerDependencies": {
-    "webpack": "~4||~5",
-    "webpack-dev-server": "~3||~4"
+    "webpack": "~5",
+    "webpack-dev-server": "catalog:"
   },
   "scripts": {
     "dry-release": "release-it --dry-run",

packages/volto-razzle-dev-utils/printErrors.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const webpackMajor = require('./webpackMajor');
 const chalk = require('chalk');
 
 /**
@@ -13,17 +12,12 @@ function printErrors(summary, errors, verbose) {
   console.log(chalk.red(summary));
   console.log();
   errors.forEach((err) => {
-    if (webpackMajor < 5) {
-      // webpack 4 format
-      console.error(err);
-    } else {
-      if (err.message) {
-        console.error(err.message);
-      }
-      console.error(err.stack || err);
-      if (err.details) {
-        console.error(err.details);
-      }
+    if (err.message) {
+      console.error(err.message);
+    }
+    console.error(err.stack || err);
+    if (err.details) {
+      console.error(err.details);
     }
     console.log();
   });

packages/volto-razzle-dev-utils/printWarnings.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const webpackMajor = require('./webpackMajor');
 const chalk = require('chalk');
 
 /**
@@ -13,19 +12,14 @@ function printWarnings(summary, warnings, verbose) {
   console.log(chalk.yellow(summary));
   console.log();
   warnings.forEach((wrn) => {
-    if (webpackMajor < 5) {
-      // webpack 4
-      console.warn(wrn);
-    } else {
-      if (wrn.message) {
-        console.warn(wrn.message);
-      }
-      if (verbose) {
-        console.warn(wrn.stack || wrn);
-      }
-      if (wrn.details) {
-        console.warn(wrn.details);
-      }
+    if (wrn.message) {
+      console.warn(wrn.message);
+    }
+    if (verbose) {
+      console.warn(wrn.stack || wrn);
+    }
+    if (wrn.details) {
+      console.warn(wrn.details);
     }
     console.log();
   });

packages/volto-razzle-dev-utils/webpackHotDevClient.js

@@ -9,23 +9,17 @@
 // that looks similar to our console output. The error overlay is inspired by:
 // https://github.com/glenjamin/webpack-hot-middleware
 
-// HACK ALERT: Most of this file is identical to the webpackHotDevClientV4.js file with the exception of the code blocks
-// denoted with //--- START Unique code --- and //--- END Unique code
-// This was done to avoid getting a warning about the `createSocketURL` vs `createSocketUrl` file names
-// You must keep the code in these two files in sync
-
-var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
-//--- START Unique code ---
-// This code is unique to webpack-dev-server v3
-var createSocketUrl = require('webpack-dev-server/client/utils/createSocketUrl');
-var socketUrl = createSocketUrl();
-//--- END Unique code ---
+// The single API changed to 2 APIs in v4, first you parse the URL, then you create the socket URL from the parsed data
+// These APIs are accessible from the `default` context
+var parseURL = require('webpack-dev-server/client').parseURL;
+var createSocketUrl = require('webpack-dev-server/client').createSocketURL;
+var socketUrl = createSocketUrl(parseURL());
 
 var parsedSocketUrl = url.parse(socketUrl);
 
@@ -70,10 +64,7 @@ if (module.hot && typeof module.hot.dispose === 'function') {
   });
 }
 
-//--- START Unique code ---
-// This code is unique to webpack-dev-server v3
-var connection = new SockJS(socketUrl);
-//--- END Unique code ---
+var connection = new WebSocket(socketUrl);
 
 // Unlike WebpackDevServer client, we won't try to reconnect
 // to avoid spamming the console. Disconnect usually happens
@@ -147,19 +138,15 @@ function handleWarnings(warnings) {
     }
   }
 
+  printWarnings();
+
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
     tryApplyUpdates(function onSuccessfulHotUpdate() {
-      // Only print warnings if we aren't refreshing the page.
-      // Otherwise they'll disappear right away anyway.
-      printWarnings();
       // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
       tryDismissErrorOverlay();
     });
-  } else {
-    // Print initial warnings immediately.
-    printWarnings();
   }
 }
 
@@ -213,8 +200,7 @@ connection.onmessage = function (e) {
     case 'ok':
       handleSuccess();
       break;
-    case 'content-changed':
-      // Triggered when a file from `contentBase` changed.
+    case 'static-changed':
       window.location.reload();
       break;
     case 'warnings':
@@ -241,6 +227,18 @@ function canApplyUpdates() {
   return module.hot.status() === 'idle';
 }
 
+function canAcceptErrors() {
+  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
+  const hasReactRefresh = process.env.FAST_REFRESH;
+
+  const status = module.hot.status();
+  // React refresh can handle hot-reloading over errors.
+  // However, when hot-reload status is abort or fail,
+  // it indicates the current update cannot be applied safely,
+  // and thus we should bail out to a forced reload for consistency.
+  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1;
+}
+
 // Attempt to update code on the fly, fall back to a hard reload.
 function tryApplyUpdates(onHotUpdateSuccess) {
   if (!module.hot) {
@@ -254,10 +252,13 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    const hasReactRefresh = process.env.FAST_REFRESH;
-    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
-    // React refresh can handle hot-reloading over errors.
-    if (!hasReactRefresh && wantsForcedReload) {
+    const haveErrors = err || hadRuntimeError;
+    // When there is no error but updatedModules is unavailable,
+    // it indicates a critical failure in hot-reloading,
+    // e.g. server is not ready to serve new bundle,
+    // and hence we need to do a forced reload.
+    const needsForcedReload = !err && !updatedModules;
+    if ((haveErrors && !canAcceptErrors()) || needsForcedReload) {
       window.location.reload();
       return;
     }