fix(hot): scope the catch-up sync and pair bundles by name

- A client connecting after a build now receives the catch-up `sync`
  alone instead of it being broadcast to every connected client, which
  re-triggered their reporters on each new tab.
- `publishBundles` pairs the previous build's bundles by name instead of
  array index, so a changing set of compilations cannot compare a bundle
  against a sibling's hash. Unnamed bundles keep the positional pairing.
- The client's console dedup cache is cleared per bundle, so a sibling's
  clean build no longer re-logs another bundle's unchanged problems.

Author: bjohansebas

client-src/globals.d.ts

@@ -9,7 +9,7 @@ declare module "ansi-html-community" {
 }
 
 interface ClientReporter {
-  cleanProblemsCache(): void;
+  cleanProblemsCache(name: string): void;
   problems(
     type: "errors" | "warnings",
     obj: { errors: string[]; warnings: string[]; name?: string },

client-src/index.js

@@ -264,7 +264,7 @@ export function disconnect() {
 
 /**
  * @returns {{
- * cleanProblemsCache: () => void,
+ * cleanProblemsCache: (name: string) => void,
  * problems: (type: "errors" | "warnings", obj: HMRPayload) => boolean,
  * success: (obj?: HMRPayload) => void,
  * useCustomOverlay: (customOverlay: EXPECTED_ANY) => void,
@@ -384,8 +384,10 @@ function createReporter() {
   };
 
   return {
-    cleanProblemsCache() {
-      previousProblems.clear();
+    cleanProblemsCache(name) {
+      // Scoped to one bundle so a sibling's unchanged problems do not re-log.
+      previousProblems.delete(`${name}|errors`);
+      previousProblems.delete(`${name}|warnings`);
     },
     problems(type, obj) {
       logProblems(type, obj);
@@ -465,11 +467,11 @@ function processMessage(obj) {
           reporter.problems("warnings", obj);
         }
       } else if (reporter) {
-        reporter.cleanProblemsCache();
+        reporter.cleanProblemsCache(obj.name || "");
         reporter.success(obj);
       }
       if (shouldApply) {
-        applyUpdate(obj.hash, options);
+        applyUpdate(obj.hash, options, obj.name);
       }
       break;
     }

client-src/process-update.js

@@ -8,6 +8,10 @@ const HMR_DOCS_URL = "https://webpack.js.org/concepts/hot-module-replacement/";
 
 /** @type {string | undefined} */
 let lastHash;
+// Name of the compilation this runtime belongs to, locked on the first event
+// whose hash matches `__webpack_hash__` (e.g. the `sync` sent on connect).
+/** @type {string | undefined} */
+let ownName;
 /** @type {Record<string, number>} */
 const failureStatuses = { abort: 1, fail: 1 };
 // Set per applyUpdate() call from the client's `reload` option.
@@ -55,8 +59,21 @@ function upToDate(hash) {
 /**
  * @param {string} hash latest hash from the SSE payload
  * @param {{ reload?: boolean }} options client options
+ * @param {string=} name compilation name the payload belongs to
  */
-export default function applyUpdate(hash, options) {
+export default function applyUpdate(hash, options, name) {
+  // MultiCompiler: a sibling bundle's hash would poison `lastHash` and end
+  // in "Cannot find update" plus a spurious full reload.
+  if (name) {
+    if (ownName === undefined && hash === __webpack_hash__) {
+      ownName = name;
+    }
+
+    if (ownName !== undefined && name !== ownName) {
+      return;
+    }
+  }
+
   const hot = getHot();
 
   if (!hot) {
@@ -150,6 +167,12 @@ export default function applyUpdate(hash, options) {
       .check(false)
       .then((updatedModules) => {
         if (!updatedModules) {
+          // A sibling bundle's event that raced the connect-time lock — the
+          // missing manifest is expected, not a reason to reload.
+          if (name && ownName !== undefined && name !== ownName) {
+            return undefined;
+          }
+
           log.warn("Cannot find update (Full reload needed)");
           log.warn("(Probably because of restarting the server)");
           performReload();

src/hot.js

@@ -35,6 +35,7 @@
  * @typedef {object} EventStream
  * @property {(req: IncomingMessage, res: ServerResponse) => void} handler attach a new client
  * @property {(payload: Payload | { action: string }) => void} publish publish a payload to every client
+ * @property {(res: ServerResponse, payload: Payload | { action: string }) => void} publishTo publish a payload to a single client
  * @property {() => void} close end every client and stop the heartbeat
  */
 
@@ -138,6 +139,9 @@ function createEventStream(heartbeat, logger) {
         client.write(`data: ${JSON.stringify(payload)}\n\n`);
       });
     },
+    publishTo(res, payload) {
+      res.write(`data: ${JSON.stringify(payload)}\n\n`);
+    },
   };
 }
 
@@ -219,6 +223,22 @@ function toBundles(statsResult, statsOptions) {
   return extractBundles(normalizeStats(statsResult, resultStatsOptions));
 }
 
+/**
+ * @param {StatsCompilation} stats normalized per-bundle stats
+ * @param {"built" | "sync"} action action
+ * @returns {Payload} SSE payload
+ */
+function bundlePayload(stats, action) {
+  return {
+    name: stats.name || "",
+    action,
+    time: stats.time,
+    hash: stats.hash,
+    warnings: formatErrors(stats.warnings || []),
+    errors: formatErrors(stats.errors || []),
+  };
+}
+
 /**
  * Publish one event per bundle. Bundles whose hash did not change are
  * published as `sync`, so their clients do not fetch a hot-update manifest
@@ -231,19 +251,23 @@ function publishBundles(bundles, previousBundles, eventStream) {
   for (const [index, stats] of bundles.entries()) {
     const name = stats.name || "";
 
+    // Paired by name so a changing set of compilations (children appearing,
+    // config reloads) cannot compare a bundle against a sibling's hash;
+    // unnamed bundles fall back to their position.
+    let previous = null;
+
+    if (previousBundles !== null) {
+      previous = name
+        ? previousBundles.find((bundle) => (bundle.name || "") === name) || null
+        : previousBundles[index] || null;
+    }
+
     const changed =
       previousBundles === null ||
-      !previousBundles[index] ||
-      previousBundles[index].hash !== stats.hash;
-
-    eventStream.publish({
-      name,
-      action: changed ? "built" : "sync",
-      time: stats.time,
-      hash: stats.hash,
-      warnings: formatErrors(stats.warnings || []),
-      errors: formatErrors(stats.errors || []),
-    });
+      previous === null ||
+      previous.hash !== stats.hash;
+
+    eventStream.publish(bundlePayload(stats, changed ? "built" : "sync"));
   }
 }
 
@@ -338,9 +362,11 @@ function createHot(compiler, userOptions) {
 
       eventStream.handler(req, res);
 
-      // Catch the new client up; self-comparison publishes everything as `sync`.
+      // Catch only the new client up, as `sync` events with the last hashes.
       if (valid && latestBundles) {
-        publishBundles(latestBundles, latestBundles, eventStream);
+        for (const stats of latestBundles) {
+          eventStream.publishTo(res, bundlePayload(stats, "sync"));
+        }
       }
     },
     publish(payload) {

test/client.test.js

@@ -147,6 +147,7 @@ describe("client", () => {
       expect(processUpdate).toHaveBeenCalledWith(
         "1234567890abcdef",
         expect.objectContaining({ reload: true }),
+        undefined,
       );
     });
 
@@ -429,6 +430,80 @@ describe("client", () => {
       expect(clientOverlay.clear).toHaveBeenCalledTimes(1);
     });
 
+    it("re-logs the same error text after the bundle's own successful build", () => {
+      const es = EventSourceStub.lastInstance();
+      const brokenPayload = {
+        action: "built",
+        name: "app",
+        time: 100,
+        hash: "app-hash",
+        errors: ["app broke"],
+        warnings: [],
+      };
+      es.onmessage(makeMessage(brokenPayload));
+
+      const appLogs = () =>
+        console.error.mock.calls.filter((call) =>
+          call.join(" ").includes("app broke"),
+        ).length;
+      const before = appLogs();
+
+      expect(before).toBeGreaterThan(0);
+
+      // The bundle's own success drops its console cache…
+      es.onmessage(
+        makeMessage({
+          action: "built",
+          name: "app",
+          time: 100,
+          hash: "app-hash-2",
+          errors: [],
+          warnings: [],
+        }),
+      );
+      // …so breaking again with the exact same text logs again.
+      es.onmessage(makeMessage({ ...brokenPayload, hash: "app-hash-3" }));
+
+      expect(appLogs()).toBe(before * 2);
+    });
+
+    it("does not re-log a bundle's unchanged errors when a sibling succeeds", () => {
+      const es = EventSourceStub.lastInstance();
+      const appPayload = {
+        action: "sync",
+        name: "app",
+        time: 100,
+        hash: "app-hash",
+        errors: ["app broke"],
+        warnings: [],
+      };
+      es.onmessage(makeMessage(appPayload));
+
+      const appLogs = () =>
+        console.error.mock.calls.filter((call) =>
+          call.join(" ").includes("app broke"),
+        ).length;
+      const before = appLogs();
+
+      expect(before).toBeGreaterThan(0);
+
+      // A clean sibling build clears only its own console cache, so
+      // re-publishing app's identical errors stays de-duplicated.
+      es.onmessage(
+        makeMessage({
+          action: "built",
+          name: "admin",
+          time: 100,
+          hash: "admin-hash",
+          errors: [],
+          warnings: [],
+        }),
+      );
+      es.onmessage(makeMessage(appPayload));
+
+      expect(appLogs()).toBe(before);
+    });
+
     it("shows the union of problems from every broken bundle", () => {
       const es = EventSourceStub.lastInstance();
       es.onmessage(
@@ -683,6 +758,7 @@ describe("client", () => {
       expect(processUpdate).toHaveBeenCalledWith(
         "1234567890abcdef",
         expect.objectContaining({ reload: false }),
+        undefined,
       );
     });
   });

test/hot.test.js

@@ -455,6 +455,52 @@ describe("createHot", () => {
     hot.close();
   });
 
+  it("does not re-send the catch-up sync to already connected clients", () => {
+    const compiler = makeFakeCompiler();
+    const hot = createHot(compiler, {});
+    const { writes: firstWrites } = attachClient({ handler: hot.handle });
+
+    compiler.emitDone(makeFakeStats());
+    firstWrites.length = 0;
+
+    const { writes: secondWrites } = attachClient({ handler: hot.handle });
+
+    expect(secondWrites.some((w) => w.includes('"action":"sync"'))).toBe(true);
+    expect(firstWrites.some((w) => w.includes('"action":"sync"'))).toBe(false);
+
+    hot.close();
+  });
+
+  it("pairs bundles by name when the compilation order changes", () => {
+    const compiler = makeFakeCompiler();
+    const hot = createHot(compiler, {});
+    const { writes } = attachClient({ handler: hot.handle });
+
+    compiler.emitDone({
+      stats: [
+        makeFakeStats({ name: "app", hash: "app-1" }),
+        makeFakeStats({ name: "admin", hash: "admin-1" }),
+      ],
+    });
+    writes.length = 0;
+
+    // Same hashes, different order — nothing actually changed.
+    compiler.emitInvalid();
+    compiler.emitDone({
+      stats: [
+        makeFakeStats({ name: "admin", hash: "admin-1" }),
+        makeFakeStats({ name: "app", hash: "app-1" }),
+      ],
+    });
+
+    expect(writes.some((w) => w.includes('"action":"built"'))).toBe(false);
+    expect(
+      writes.filter((w) => w.includes('"action":"sync"')).length,
+    ).toBeGreaterThanOrEqual(2);
+
+    hot.close();
+  });
+
   it("falls back to compilation.name when stats name is empty", () => {
     const compiler = makeFakeCompiler();
     const hot = createHot(compiler, {});

test/process-update.test.js

@@ -97,6 +97,55 @@ describe("process-update", () => {
     expect(reloadPage).not.toHaveBeenCalled();
   });
 
+  describe("multi-compiler bundles", () => {
+    it("ignores events from sibling bundles once the own compilation is identified", async () => {
+      // The `sync` sent on connect carries the bundle's own hash and locks the name.
+      applyUpdate("current-hash", { reload: true }, "app");
+
+      const hot = getHot();
+
+      expect(hot.check).not.toHaveBeenCalled();
+
+      // A sibling bundle rebuilds with a hash this runtime can never match.
+      applyUpdate("admin-hash", { reload: true }, "admin");
+      await flushPromises();
+
+      expect(hot.check).not.toHaveBeenCalled();
+      expect(reloadPage).not.toHaveBeenCalled();
+
+      // The own bundle rebuilding still applies the update.
+      applyUpdate("app-hash-2", { reload: true }, "app");
+      globalThis.__webpack_hash__ = "app-hash-2";
+      await flushPromises();
+
+      expect(hot.check).toHaveBeenCalledWith(false);
+      expect(hot.apply).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not reload when a pre-lock sibling check resolves without an update", async () => {
+      applyUpdate = loadApplyUpdate(makeFakeHot({ checkResult: null }));
+      globalThis.__webpack_hash__ = "app-hash";
+
+      // Connect-time catch-up: the sibling's sync arrives first and starts a
+      // check against a manifest that was never emitted…
+      applyUpdate("admin-hash", { reload: true }, "admin");
+      // …and the own bundle's sync locks the name before that check resolves.
+      applyUpdate("app-hash", { reload: true }, "app");
+      await flushPromises();
+
+      expect(getHot().check).toHaveBeenCalledTimes(1);
+      expect(reloadPage).not.toHaveBeenCalled();
+    });
+
+    it("still checks named events while the own compilation is unknown", async () => {
+      applyUpdate("new-hash", { reload: true }, "admin");
+      globalThis.__webpack_hash__ = "new-hash";
+      await flushPromises();
+
+      expect(getHot().check).toHaveBeenCalledWith(false);
+    });
+  });
+
   it("checks and applies an update when the hash differs", async () => {
     applyUpdate("new-hash", { reload: true });
     globalThis.__webpack_hash__ = "new-hash";