fix: support webpack-dev-server 6.x (drop SockJS instanceof checks)

WDS 6.0.0 removed the SockJSClient module, which broke WDSSocket.js's
require() of it with a compile-time "Module not found" error. Detect
the active client via duck-typing on `.sock`/`.client` instead of
instanceof checks against imported client classes, which works
unchanged across WDS 4/5/6 and needs no optional require.

Also widen the webpack-dev-server peer range to include 6.x and extend
the test harness/CI matrix to cover it.

Author: rtm-ctrlz

.github/workflows/ci.yaml

@@ -42,6 +42,7 @@ jobs:
         wds-version:
           - '4'
           - '5'
+          - '6'
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4
@@ -71,6 +72,7 @@ jobs:
         wds-version:
           - '4'
           - '5'
+          - '6'
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4

README.md

@@ -320,11 +320,11 @@ but you can set the [`overlay.sockIntegration`](docs/API.md#sockintegration) opt
 
 The supported versions are as follows:
 
-| Dependency               | Version           |
-| ------------------------ | ----------------- |
-| `webpack-dev-server`     | `4.8.0`+ or `5.x` |
-| `webpack-hot-middleware` | `2.x`             |
-| `webpack-plugin-serve`   | `1.x`             |
+| Dependency               | Version                    |
+| ------------------------ | -------------------------- |
+| `webpack-dev-server`     | `4.8.0`+ or `5.x` or `6.x` |
+| `webpack-hot-middleware` | `2.x`                      |
+| `webpack-plugin-serve`   | `1.x`                      |
 
 ## API
 

package.json

@@ -106,6 +106,7 @@
     "webpack-cli": "^7.0.3",
     "webpack-dev-server": "^5.2.6",
     "webpack-dev-server-v4": "npm:webpack-dev-server@^4.8.0",
+    "webpack-dev-server-v6": "npm:webpack-dev-server@^6.0.0",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-plugin-serve": "^1.6.0",
     "yn": "^4.0.0"
@@ -116,7 +117,7 @@
     "sockjs-client": "^1.4.0",
     "type-fest": ">=0.17.0 <6.0.0",
     "webpack": "^5.0.0",
-    "webpack-dev-server": "^4.8.0 || 5.x",
+    "webpack-dev-server": "^4.8.0 || 5.x || 6.x",
     "webpack-hot-middleware": "2.x",
     "webpack-plugin-serve": "1.x"
   },

sockets/WDSSocket.js

@@ -4,15 +4,16 @@
  * @returns {void}
  */
 function initWDSSocket(messageHandler) {
-  const { default: SockJSClient } = require('webpack-dev-server/client/clients/SockJSClient');
-  const { default: WebSocketClient } = require('webpack-dev-server/client/clients/WebSocketClient');
   const { client } = require('webpack-dev-server/client/socket');
 
   /** @type {WebSocket} */
   let connection;
-  if (client instanceof SockJSClient) {
+  if (client.sock) {
+    // SockJSClient exposes the underlying socket via `.sock`.
+    // WDS 6.0.0 dropped SockJS support, so this branch is dead in WDS 6+.
     connection = client.sock;
-  } else if (client instanceof WebSocketClient) {
+  } else if (client.client) {
+    // WebSocketClient exposes the underlying socket via `.client`.
     connection = client.client;
   } else {
     throw new Error('Failed to determine WDS client type');

test/helpers/sandbox/aliasWDSv6.js

@@ -0,0 +1,3 @@
+const moduleAlias = require('module-alias');
+
+moduleAlias.addAliases({ 'webpack-dev-server': 'webpack-dev-server-v6' });

test/helpers/sandbox/configs.js

@@ -86,6 +86,7 @@ module.exports = {
     alias: ${JSON.stringify(
       {
         ...(WDS_VERSION === 4 && { 'webpack-dev-server': 'webpack-dev-server-v4' }),
+        ...(WDS_VERSION === 6 && { 'webpack-dev-server': 'webpack-dev-server-v6' }),
       },
       null,
       2

test/helpers/sandbox/spawn.js

@@ -133,9 +133,10 @@ function spawnWebpackServe(port, dirs, options = {}) {
 
   const NODE_OPTIONS = [
     // This requires a script to alias `webpack-dev-server` -
-    // both v4 and v5 are installed,
+    // v4, v5 and v6 are all installed,
     // so we have to ensure that they resolve to the correct variant.
     WDS_VERSION === 4 && `--require "${require.resolve('./aliasWDSv4')}"`,
+    WDS_VERSION === 6 && `--require "${require.resolve('./aliasWDSv6')}"`,
   ]
     .filter(Boolean)
     .join(' ');