diff --git a/lib/web/JsonpChunkLoadingRuntimeModule.js b/lib/web/JsonpChunkLoadingRuntimeModule.js index 0b9cebd84..bb3d7165b 100644 --- a/lib/web/JsonpChunkLoadingRuntimeModule.js +++ b/lib/web/JsonpChunkLoadingRuntimeModule.js @@ -338,11 +338,10 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule { ]), "}", "", - `${globalObject}[${JSON.stringify( - hotUpdateGlobal - )}] = ${runtimeTemplate.basicFunction( + `var hmrGlobalJsonpLoader = ${runtimeTemplate.basicFunction( "chunkId, moreModules, runtime", [ + "if (!currentUpdate) return;", "for(var moduleId in moreModules) {", Template.indent([ `if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`, @@ -362,6 +361,18 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule { "}" ] )};`, + `var oldHmrGlobalJsonpLoader = ${globalObject}[${JSON.stringify( + hotUpdateGlobal + )}] || (${runtimeTemplate.basicFunction("", [])});`, + `${globalObject}[${JSON.stringify( + hotUpdateGlobal + )}] = ${runtimeTemplate.basicFunction( + "chunkId, moreModules, runtime", + [ + `oldHmrGlobalJsonpLoader(chunkId, moreModules, runtime);`, + `hmrGlobalJsonpLoader(chunkId, moreModules, runtime);` + ] + )};`, "", Template.getFunctionContent( require("../hmr/JavascriptHotModuleReplacement.runtime.js") diff --git a/test/hotCases/multiple-runtime-instances/child/index.js b/test/hotCases/multiple-runtime-instances/child/index.js new file mode 100644 index 000000000..9736c4fe6 --- /dev/null +++ b/test/hotCases/multiple-runtime-instances/child/index.js @@ -0,0 +1,10 @@ +import { value } from './value.js'; + +const div = document.createElement('div'); +div.innerHTML = value +document.body.appendChild(div); + +module.hot.accept('./value.js', () => { + const newValue = require('./value.js').value; + div.innerHTML = newValue; +}) diff --git a/test/hotCases/multiple-runtime-instances/child/value.js b/test/hotCases/multiple-runtime-instances/child/value.js new file mode 100644 index 000000000..efeee5db1 --- /dev/null +++ b/test/hotCases/multiple-runtime-instances/child/value.js @@ -0,0 +1 @@ +export const value = 1; diff --git a/test/hotCases/multiple-runtime-instances/child/webpack.config.js b/test/hotCases/multiple-runtime-instances/child/webpack.config.js new file mode 100644 index 000000000..ddc86dcb9 --- /dev/null +++ b/test/hotCases/multiple-runtime-instances/child/webpack.config.js @@ -0,0 +1,17 @@ +const path = require("path"); + +/** @type import('webpack').Configuration */ +module.exports = { + mode: "development", + entry: "./index.js", + output: { + path: path.resolve(__dirname, "dist"), + filename: "bundle.js" + }, + devServer: { + port: 8000, + headers: { + "Access-Control-Allow-Origin": "*" + } + } +}; diff --git a/test/hotCases/multiple-runtime-instances/parent/index.html b/test/hotCases/multiple-runtime-instances/parent/index.html new file mode 100644 index 000000000..78e69bfd6 --- /dev/null +++ b/test/hotCases/multiple-runtime-instances/parent/index.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/test/hotCases/multiple-runtime-instances/parent/index.js b/test/hotCases/multiple-runtime-instances/parent/index.js new file mode 100644 index 000000000..f327d4708 --- /dev/null +++ b/test/hotCases/multiple-runtime-instances/parent/index.js @@ -0,0 +1,23 @@ +function loadScript(url) { + return new Promise((resolve, reject) => { + const script = document.createElement('script') + script.src = url + if (url.endsWith('.mjs')) { + script.type = 'module' + } + + script.onerror = (error) => { + document.body.removeChild(script) + reject(error) + } + + script.onload = () => { + resolve() + document.body.removeChild(script) + } + + document.body.append(script) + }) +} + +loadScript('http://localhost:8000/bundle.js').then(() => loadScript('http://localhost:8000/bundle.js'))