fix: allow multiple runtime instances to receive HMR updates

GuilleX7 · GuilleX7 · commit cc222c6c1f82 · 2025-05-20T13:20:15.000+02:00
diff --git a/crates/rspack_plugin_runtime/src/runtime_module/runtime/jsonp_chunk_loading_with_hmr.ejs b/crates/rspack_plugin_runtime/src/runtime_module/runtime/jsonp_chunk_loading_with_hmr.ejs
@@ -32,7 +32,8 @@ function loadUpdateChunk(chunkId, updatedModulesList) {
 	});
 }
 
-<%- _global_object %>[<%- _hot_update_global %>] = <%- basicFunction("chunkId, moreModules, runtime") %> {
+var hmrGlobalJsonpLoader = <%- basicFunction("chunkId, moreModules, runtime") %> {
+	if (!currentUpdate) return;
 	for (var moduleId in moreModules) {
 		if (<%- HAS_OWN_PROPERTY %>(moreModules, moduleId)) {
 			currentUpdate[moduleId] = moreModules[moduleId];
@@ -45,3 +46,8 @@ function loadUpdateChunk(chunkId, updatedModulesList) {
 		waitingUpdateResolves[chunkId] = undefined;
 	}
 };
+var oldHmrGlobalJsonpLoader = <%- _global_object %>[<%- _hot_update_global %>] || (<%- basicFunction("") %> {});
+<%- _global_object %>[<%- _hot_update_global %>] = <%- basicFunction("chunkId, moreModules, runtime") %> {
+	oldHmrGlobalJsonpLoader(chunkId, moreModules, runtime);	
+	hmrGlobalJsonpLoader(chunkId, moreModules, runtime);
+};
diff --git a/tests/e2e/cases/hmr/multiple-runtime-instances/index.test.ts b/tests/e2e/cases/hmr/multiple-runtime-instances/index.test.ts
@@ -0,0 +1,18 @@
+import { test, expect } from "@/fixtures";
+
+test("hmr works for multiple instances of the same runtime", async ({
+	page,
+	fileAction,
+	rspack,
+}) => {
+	await expect(await page.getByTestId('0').textContent()).toBe("1");
+	await expect(await page.getByTestId('1').textContent()).toBe("1");
+
+	fileAction.updateFile("src/value.js", content => {
+		return content.replace("1", "2");
+	}
+	);
+
+	await expect(await page.getByTestId('0')).toHaveText("2");
+	await expect(await page.getByTestId('1')).toHaveText("2");
+});
diff --git a/tests/e2e/cases/hmr/multiple-runtime-instances/rspack.config.js b/tests/e2e/cases/hmr/multiple-runtime-instances/rspack.config.js
@@ -0,0 +1,17 @@
+const rspack = require('@rspack/core');
+
+/** @type import('@rspack/core').Configuration */
+module.exports ={
+	mode: "development",
+	entry: "./src/index.js",
+	output: {
+		filename: "bundle.js",
+	},
+	plugins: [
+		new rspack.HtmlRspackPlugin({
+			template: "./src/index.html",
+			// Skip default script injection
+			chunks: []
+		})
+	],
+};
diff --git a/tests/e2e/cases/hmr/multiple-runtime-instances/src/index.html b/tests/e2e/cases/hmr/multiple-runtime-instances/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <script src="./bundle.js"></script>
+        <script src="./bundle.js"></script>
+    </body>
+</html>
diff --git a/tests/e2e/cases/hmr/multiple-runtime-instances/src/index.js b/tests/e2e/cases/hmr/multiple-runtime-instances/src/index.js
@@ -0,0 +1,11 @@
+import { value } from './value.js';
+
+const div = document.createElement('div');
+div.innerHTML = value
+div.setAttribute('data-testid', document.querySelectorAll('div').length.toString());
+document.body.appendChild(div);
+
+module.hot.accept('./value.js', () => {
+	const newValue = require('./value.js').value;
+	div.innerHTML = newValue;
+})
diff --git a/tests/e2e/cases/hmr/multiple-runtime-instances/src/value.js b/tests/e2e/cases/hmr/multiple-runtime-instances/src/value.js
@@ -0,0 +1 @@
+export let value = '1'
