chore: update chokidar to v4

Author: bjohansebas

lib/Server.js

@@ -17,7 +17,7 @@ const schema = require("./options.json");
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 /** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
-/** @typedef {import("chokidar").WatchOptions} WatchOptions */
+/** @typedef {import("chokidar").ChokidarOptions} WatchOptions */
 /** @typedef {import("chokidar").FSWatcher} FSWatcher */
 /** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
 /** @typedef {import("bonjour-service").Bonjour} Bonjour */
@@ -306,6 +306,22 @@ function useFn(route, fn) {
 
 const DEFAULT_ALLOWED_PROTOCOLS = /^(file|.+-extension):/i;
 
+/**
+ * Removes properties with undefined values from an object.
+ * Needed because chokidar v4 crashes when options are explicitly set to undefined.
+ * @see https://github.com/paulmillr/chokidar/issues/1394
+ * @template {Record<string, unknown>} T
+ * @param {T} obj the object to filter
+ * @returns {T} a new object without undefined values
+ */
+function removeUndefinedValues(obj) {
+  return /** @type {T} */ (
+    Object.fromEntries(
+      Object.entries(obj).filter(([, value]) => typeof value !== "undefined"),
+    )
+  );
+}
+
 /**
  * @typedef {object} BasicApplication
  * @property {typeof useFn} use
@@ -833,7 +849,7 @@ class Server {
 
       const usePolling = getPolling();
       const interval = getInterval();
-      const { poll, ...rest } = watchOptions;
+      const { poll: _poll, ...rest } = watchOptions;
 
       return {
         ignoreInitial: true,
@@ -844,9 +860,7 @@ class Server {
         ignorePermissionErrors: true,
         // Respect options from compiler watchOptions
         usePolling,
-        interval,
-        ignored: watchOptions.ignored,
-        // TODO: we respect these options for all watch options and allow developers to pass them to chokidar, but chokidar doesn't have these options maybe we need revisit that in future
+        ...(interval !== undefined ? { interval } : {}),
         ...rest,
       };
     };
@@ -3188,10 +3202,14 @@ class Server {
    * @param {string | string[]} watchPath watch path
    * @param {WatchOptions=} watchOptions watch options
    */
-  watchFiles(watchPath, watchOptions) {
+  watchFiles(watchPath, watchOptions = {}) {
     const chokidar = require("chokidar");
 
-    const watcher = chokidar.watch(watchPath, watchOptions);
+    // https://github.com/paulmillr/chokidar/issues/1394
+    const watcher = chokidar.watch(
+      watchPath,
+      removeUndefinedValues(watchOptions),
+    );
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {

lib/options.json

@@ -850,7 +850,7 @@
           "$ref": "#/definitions/WatchFilesObject"
         }
       ],
-      "description": "Allows to configure list of globs/directories/files to watch for file changes.",
+      "description": "Allows to configure list of directories/files to watch for file changes.",
       "link": "https://webpack.js.org/configuration/dev-server/#devserverwatchfiles"
     },
     "WatchFilesObject": {
@@ -873,7 +873,7 @@
               "minLength": 1
             }
           ],
-          "description": "Path(s) of globs/directories/files to watch for file changes."
+          "description": "Path(s) of directories/files to watch for file changes."
         },
         "options": {
           "type": "object",

migration-v6.md

@@ -37,6 +37,47 @@ This document serves as a migration guide for `webpack-dev-server@6.0.0`.
   };
   ```
 
+- Updated `chokidar` from v3 to v4. Glob patterns are no longer supported in `watchFiles`. If you previously used globs, you can watch a directory and filter with `ignored`:
+
+  v5:
+
+  ```js
+  module.exports = {
+    devServer: {
+      watchFiles: "src/**/*.js",
+    },
+  };
+  ```
+
+  v6:
+
+  ```js
+  module.exports = {
+    devServer: {
+      watchFiles: {
+        paths: "src",
+        options: {
+          ignored: (path, stats) => stats?.isFile() && !path.endsWith(".js"),
+        },
+      },
+    },
+  };
+  ```
+
+  Or resolve the glob before passing it:
+
+  ```js
+  const { globSync } = require("node:fs");
+
+  module.exports = {
+    devServer: {
+      watchFiles: globSync("src/**/*.js"),
+    },
+  };
+  ```
+
+  > **Note:** `fs.globSync` requires Node.js 22+. For Node.js 20, use a package like `fast-glob` or `tinyglobby`.
+
 - Now, webpack-dev-server adds WebSocket communication only when the `target` is set to a web-compatible environment. Previously, it also injected WebSocket communication if `resolve` contained a `conditionNames` entry with `browser` or if `externalsPresets.web` existed.
 
 - When retrieving the configuration in a multi-compiler setup, it will look for one that has a target compatible with a web environment. If it doesn’t find one, it will fall back to the first compiler found by webpack.

package-lock.json

@@ -53,7 +53,7 @@
     "@types/ws": "^8.18.1",
     "ansi-html-community": "^0.0.8",
     "bonjour-service": "^1.3.0",
-    "chokidar": "^3.6.0",
+    "chokidar": "^4.0.3",
     "compression": "^1.8.1",
     "connect-history-api-fallback": "^2.0.0",
     "express": "^5.2.1",