fix(client): avoid double slash when joining dynamicPublicPath (#2348)

* fix(client): avoid double slash when joining dynamicPublicPath

When output.publicPath ends with a slash (the common case) and the SSE
path starts with one, the naive concatenation produced URLs like
`https://host//__webpack_hmr`, which never match the server-side
pathname check.

Ref webpack/webpack-hot-middleware#366

* fix(client): append path to the public path like a filename in dynamicPublicPath

The default `path` starts with "/", so the naive concatenation with a
public path ending in "/" produced URLs like
`https://host//__webpack_hmr`, which never match the server-side
pathname check.

Strip the leading slash from `path` and concatenate without any other
normalization: the public path itself is left untouched (intentional
double slashes, e.g. nginx rewrites, are preserved) and is expected to
end with "/".

Ref webpack/webpack-hot-middleware#366

Author: bjohansebas

README.md

@@ -384,7 +384,7 @@ entry: [
 |      `logging`      |     `string`      |     `"info"`     | Logger level — one of `"none"`, `"error"`, `"warn"`, `"info"`, `"log"`, `"verbose"`. Uses webpack's runtime logger.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 |       `name`        |     `string`      |       `""`       | Restrict updates to a specific compilation name (useful with multi-compiler).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 |    `autoConnect`    |     `boolean`     |      `true`      | Connect on load; set to `false` and call `setOptionsAndConnect()` manually.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `dynamicPublicPath` |     `boolean`     |     `false`      | Prefix `path` with `__webpack_public_path__` at runtime.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `dynamicPublicPath` |     `boolean`     |     `false`      | Prefix `path` with `__webpack_public_path__` at runtime. The leading slash of `path` is stripped and no other normalization is applied, so the public path should end with `/`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 ### Programmatic API
 

client-src/index.js

@@ -113,7 +113,9 @@ function setOverrides(overrides) {
   }
 
   if (overrides.dynamicPublicPath) {
-    options.path = __webpack_public_path__ + options.path;
+    // `path` is appended like a filename (no leading slash); the public path
+    // itself is not normalized.
+    options.path = __webpack_public_path__ + options.path.replace(/^\//, "");
   }
 
   setLogLevel(options.logging);

test/client.test.js

@@ -702,6 +702,44 @@ describe("client", () => {
     });
   });
 
+  describe("with dynamicPublicPath", () => {
+    let EventSourceStub;
+
+    beforeEach(() => {
+      EventSourceStub = makeEventSourceStub();
+      globalThis.EventSource = EventSourceStub;
+      jest.spyOn(console, "info").mockImplementation(() => {});
+      jest.spyOn(console, "log").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      delete globalThis.__webpack_public_path__;
+      jest.restoreAllMocks();
+    });
+
+    it("appends the SSE path to the public path like webpack appends filenames", () => {
+      globalThis.__webpack_public_path__ = "/assets/";
+      loadClient("?dynamicPublicPath=true");
+      expect(EventSourceStub.lastInstance().url).toBe("/assets/__webpack_hmr");
+    });
+
+    it("preserves intentional double slashes inside the public path", () => {
+      globalThis.__webpack_public_path__ = "https://host//rewritten/";
+      loadClient("?dynamicPublicPath=true");
+      expect(EventSourceStub.lastInstance().url).toBe(
+        "https://host//rewritten/__webpack_hmr",
+      );
+    });
+
+    it("does not produce a double slash when the public path has a trailing slash", () => {
+      globalThis.__webpack_public_path__ = "https://localhost:3000/assets/";
+      loadClient("?dynamicPublicPath=true");
+      expect(EventSourceStub.lastInstance().url).toBe(
+        "https://localhost:3000/assets/__webpack_hmr",
+      );
+    });
+  });
+
   describe("connection lifecycle", () => {
     let EventSourceStub;
     let client;