webpack 5.107.1 → 5.107.2

package/lib/SourceMapDevToolPlugin.js

@@ -36,12 +36,12 @@ const { makePathsAbsolute } = require("./util/identifier");
 /**
  * Defines the source map task type used by this module.
  * @typedef {object} SourceMapTask
- * @property {Source} asset
  * @property {AssetInfo} assetInfo
  * @property {(string | Module)[]} modules
  * @property {string} source
  * @property {string} file
  * @property {RawSourceMap} sourceMap
+ * @property {Source} mapSource the Source instance whose `sourceAndMap` we called (the current asset or, when its map was already stripped, the pinned original from `originalSources`) — what `clearCache` should target
  * @property {ItemCacheFacade} cacheItem cache item
  */
 
@@ -111,12 +111,14 @@ const getOriginalSourceRegistry = (compilation) => {
  * The returned source is read from the asset as it currently stands — that way
  * any `sourceMappingURL` comments appended by earlier plugin instances survive
  * — while the map is taken from the pinned original Source when the current
- * one no longer carries it.
+ * one no longer carries it. `mapSource` identifies which Source instance was
+ * actually queried for the map (the current asset, or the pinned original);
+ * that's the one whose internal caches the caller should release.
  * @param {string} file file name
  * @param {Source} asset source object as currently held by the compilation
  * @param {MapOptions} options map extraction options
  * @param {Map<string, Source>} registry compilation-scoped original-source registry
- * @returns {{ source: string, sourceMap: RawSourceMap } | undefined} extracted pair or `undefined` when no map is recoverable
+ * @returns {{ source: string, sourceMap: RawSourceMap, mapSource: Source } | undefined} extracted pair or `undefined` when no map is recoverable
  */
 const extractSourceAndMap = (file, asset, options, registry) => {
 	/** @type {string | Buffer} */
@@ -139,20 +141,20 @@ const extractSourceAndMap = (file, asset, options, registry) => {
 		// that a later plugin instance (which will see a rewrapped asset
 		// without a map) can recover it on demand.
 		if (!registry.has(file)) registry.set(file, asset);
-	} else {
-		// The current asset (typically a `RawSource` left by an earlier
-		// SourceMapDevToolPlugin instance) has no internal map. Re-extract
-		// the map from the original Source we pinned earlier. We keep using
-		// `source` from the current asset so that any prior wrappers (e.g.
-		// appended sourceMappingURL comments) are preserved.
-		const original = registry.get(file);
-		if (!original) return;
-		sourceMap = original.sourceAndMap
-			? original.sourceAndMap(options).map
-			: original.map(options);
-		if (!sourceMap) return;
+		return { source, sourceMap, mapSource: asset };
 	}
-	return { source, sourceMap };
+	// The current asset (typically a `RawSource` left by an earlier
+	// SourceMapDevToolPlugin instance) has no internal map. Re-extract
+	// the map from the original Source we pinned earlier. We keep using
+	// `source` from the current asset so that any prior wrappers (e.g.
+	// appended sourceMappingURL comments) are preserved.
+	const original = registry.get(file);
+	if (!original) return;
+	sourceMap = original.sourceAndMap
+		? original.sourceAndMap(options).map
+		: original.map(options);
+	if (!sourceMap) return;
+	return { source, sourceMap, mapSource: original };
 };
 
 /**
@@ -177,7 +179,7 @@ const getTaskForFile = (
 ) => {
 	const extracted = extractSourceAndMap(file, asset, options, registry);
 	if (!extracted) return;
-	const { source, sourceMap } = extracted;
+	const { source, sourceMap, mapSource } = extracted;
 	const context = compilation.options.context;
 	const root = compilation.compiler.root;
 	const cachedAbsolutify = makePathsAbsolute.bindContextCache(context, root);
@@ -190,10 +192,10 @@ const getTaskForFile = (
 
 	return {
 		file,
-		asset,
 		source: /** @type {string} */ (source),
 		assetInfo,
 		sourceMap,
+		mapSource,
 		modules,
 		cacheItem
 	};
@@ -360,6 +362,25 @@ class SourceMapDevToolPlugin {
 					const tasks = [];
 					let fileIndex = 0;
 
+					// Shared deduplication set for `Source#clearCache` calls below.
+					// Webpack chunks routinely share module-level `CachedSource`
+					// instances. A per-call WeakSet would re-walk those shared
+					// subtrees once per chunk — 50 chunks × thousands of shared
+					// modules in dev/non-minified setups — and worse, every
+					// chunk's `sourceAndMap` would have to recompute the cleared
+					// caches, churning allocations (measured: +700 MB peak RSS,
+					// +6 s wall time on a 50×1000 synthetic build).
+					//
+					// Sharing one set lets each shared subtree be walked exactly
+					// once. The trade-off is that subsequent chunks' `sourceAndMap`
+					// calls can repopulate a shared module's `_cachedMaps` after
+					// its own clear was skipped (because the module is already in
+					// the visited set), leaving at most one populated cache entry
+					// per shared module at the end of the run — bounded to a few
+					// MB even at the scale of #20961. That's strictly preferable
+					// to the alternative's hundreds of MB of transient peak RSS.
+					const clearCacheVisited = new WeakSet();
+
 					asyncLib.each(
 						files,
 						(file, callback) => {
@@ -458,6 +479,44 @@ class SourceMapDevToolPlugin {
 									originalSources
 								);
 
+								// Release the per-instance caches that `sourceAndMap`
+								// just populated. The composed map (and, for
+								// `SourceMapSource`, the parsed `_sourceMapAsObject` /
+								// `_innerSourceMapAsObject`) otherwise sit on the
+								// CachedSource — and every shared child — until phase
+								// 2 replaces the asset, which is what causes the OOM
+								// spike on builds with thousands of chunks
+								// (webpack#20961). Keep `source` since downstream
+								// consumers reading the original asset still need it;
+								// `hash`/`size` default to retained because they're
+								// cheap to keep but expensive to rebuild.
+								// `clearCacheVisited` is shared across every call (see
+								// its declaration above for the rationale).
+								//
+								// Target `task.mapSource` (not `asset.source`): when
+								// `extractSourceAndMap` falls back to the pinned
+								// original (the current asset is a `RawSource` left
+								// by an earlier plugin instance), the `sourceAndMap`
+								// call populated the original's caches, not the
+								// current asset's.
+								//
+								// Feature-detected: `clearCache` landed in
+								// `webpack-sources` 3.5, but `compilation.assets` may
+								// hold `Source`-like instances from a third-party
+								// plugin built against an older copy of
+								// `webpack-sources` (or a hand-rolled implementation).
+								// Calling it unconditionally would throw on those.
+								if (task && typeof task.mapSource.clearCache === "function") {
+									task.mapSource.clearCache(
+										{
+											maps: true,
+											source: false,
+											parsedMap: true
+										},
+										clearCacheVisited
+									);
+								}
+
 								if (task) {
 									const modules = task.modules;
 
@@ -698,12 +757,23 @@ class SourceMapDevToolPlugin {
 										outputSourceMap.debugId = debugIdValue;
 									}
 
-									const sourceMapString = JSON.stringify(outputSourceMap);
 									if (sourceMapFilename) {
+										// External `.map` file: hold the serialized map as a
+										// `Buffer` instead of a V8 string. `RawSource` accepts
+										// a buffer directly, and the emitted asset stays in
+										// `compilation.assets` until the build finishes — so
+										// storing the bytes off the V8 heap (where Buffers
+										// live, accounted as `external` memory) avoids keeping
+										// a large V8 string alive for the rest of the build
+										// and reduces heap pressure on `--max-old-space-size`.
+										const sourceMapBuffer = Buffer.from(
+											JSON.stringify(outputSourceMap),
+											"utf8"
+										);
 										const filename = file;
 										const sourceMapContentHash = usesContentHash
 											? createHash(compilation.outputOptions.hashFunction)
-													.update(sourceMapString)
+													.update(sourceMapBuffer)
 													.digest("hex")
 											: undefined;
 
@@ -775,7 +845,7 @@ class SourceMapDevToolPlugin {
 										assetsInfo[file] = assetInfo;
 										compilation.updateAsset(file, asset, assetInfo);
 										// Add source map file to compilation assets and chunk files
-										const sourceMapAsset = new RawSource(sourceMapString);
+										const sourceMapAsset = new RawSource(sourceMapBuffer);
 										const sourceMapAssetInfo = {
 											...sourceMapInfo,
 											development: true
@@ -801,6 +871,16 @@ class SourceMapDevToolPlugin {
 												`${PLUGIN_NAME}: append can't be a function when no filename is provided`
 											);
 										}
+										// Inline data-URL form: `[map]` gets the raw JSON, `[url]`
+										// gets the same JSON base64-encoded. `URL_COMMENT_REGEXP`
+										// is a `/g` regex, so a user `append` template with more
+										// than one `[url]` placeholder would otherwise re-encode
+										// the same JSON per match. Pre-compute both once.
+										const sourceMapString = JSON.stringify(outputSourceMap);
+										const sourceMapBase64 = Buffer.from(
+											sourceMapString,
+											"utf8"
+										).toString("base64");
 										/**
 										 * Add source map as data url to asset
 										 */
@@ -811,10 +891,7 @@ class SourceMapDevToolPlugin {
 												.replace(
 													URL_COMMENT_REGEXP,
 													() =>
-														`data:application/json;charset=utf-8;base64,${Buffer.from(
-															sourceMapString,
-															"utf8"
-														).toString("base64")}`
+														`data:application/json;charset=utf-8;base64,${sourceMapBase64}`
 												)
 										);
 										assets[file] = asset;

package/lib/buildChunkGraph.js

@@ -16,6 +16,7 @@ const { getEntryRuntime, mergeRuntime } = require("./util/runtime");
 /** @typedef {import("./DependenciesBlock")} DependenciesBlock */
 /** @typedef {import("./Dependency").DependencyLocation} DependencyLocation */
 /** @typedef {import("./Entrypoint")} Entrypoint */
+/** @typedef {import("./Entrypoint").EntryOptions} EntryOptions */
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
@@ -581,7 +582,27 @@ const visitModules = (
 					}
 				} else {
 					entrypoint = /** @type {Entrypoint} */ (cgi.chunkGroup);
-					// TODO merge entryOptions
+					// Fill in options the existing entrypoint hasn't set yet. We never
+					// overwrite: blocks that dedupe to one entrypoint (e.g. several
+					// workers pointing at the same module) legitimately carry distinct
+					// values such as `runtime`, so the first block to create the
+					// entrypoint wins and later ones only contribute missing keys.
+					// `name` is excluded: it is the entrypoint's identity, fixed at
+					// creation (and used to key namedChunkGroups), so back-filling it
+					// from a block that deduped in via its module would leave
+					// `entrypoint.name` out of sync and make module codegen
+					// order-dependent, which breaks persistent caching.
+					const existingOptions = entrypoint.options;
+					for (const key_ of Object.keys(entryOptions)) {
+						const key =
+							/** @type {keyof EntryOptions} */
+							(key_);
+						if (key === "name") continue;
+						if (entryOptions[key] === undefined) continue;
+						if (existingOptions[key] !== undefined) continue;
+						/** @type {EntryOptions[keyof EntryOptions]} */
+						(existingOptions[key]) = entryOptions[key];
+					}
 					entrypoint.addOrigin(
 						module,
 						/** @type {DependencyLocation} */ (b.loc),
@@ -1290,7 +1311,8 @@ const connectChunkGroups = (
 		// connections and modules can only create one version
 		// TODO maybe decide this per runtime
 		if (
-			// TODO is this needed?
+			// Blocks with nested blocks must stay connected — skipping orphans the
+			// nested block's chunk group from this block's chunk group parent.
 			!blocksWithNestedBlocks.has(block) &&
 			connections.every(({ chunkGroup, originChunkGroupInfo }) =>
 				areModulesAvailable(

package/lib/cache/getLazyHashedEtag.js

@@ -25,7 +25,7 @@ class LazyHashedEtag {
 	 * @param {HashFunction} hashFunction the hash function to use
 	 */
 	constructor(obj, hashFunction = DEFAULTS.HASH_FUNCTION) {
-		/** @type {HashableObject} */
+		/** @type {HashableObject | undefined} */
 		this._obj = obj;
 		/** @type {undefined | string} */
 		this._hash = undefined;
@@ -40,8 +40,15 @@ class LazyHashedEtag {
 	toString() {
 		if (this._hash === undefined) {
 			const hash = createHash(this._hashFunction);
-			this._obj.updateHash(hash);
+			/** @type {HashableObject} */
+			(this._obj).updateHash(hash);
 			this._hash = hash.digest("base64");
+			// Drop the captured object once the hash is memoized. The hash is
+			// never reset, so we never need `_obj` again — and many callers
+			// (e.g. `SourceMapDevToolPlugin`, `RealContentHashPlugin`) capture
+			// a heavy `CachedSource` here that would otherwise stay reachable
+			// through this etag for the lifetime of the compilation cache.
+			this._obj = undefined;
 		}
 		return this._hash;
 	}

package/lib/dependencies/HarmonyExportInitFragment.js

@@ -161,9 +161,6 @@ class HarmonyExportInitFragment extends InitFragment {
 	 * @returns {string | Source | undefined} the source code that will be included as initialization code
 	 */
 	getContent({ runtimeTemplate, runtimeRequirements }) {
-		runtimeRequirements.add(RuntimeGlobals.exports);
-		runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
-
 		const unusedPart =
 			this.unusedExports.size > 1
 				? `/* unused harmony exports ${joinIterableWithComma(
@@ -184,12 +181,14 @@ class HarmonyExportInitFragment extends InitFragment {
 				)}: ${runtimeTemplate.returningFunction(value)}`
 			);
 		}
-		const definePart =
-			this.exportMap.size > 0
-				? `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
-						this.exportsArgument
-					}, {${definitions.join(",")}\n/* harmony export */ });\n`
-				: "";
+		let definePart = "";
+		if (this.exportMap.size > 0) {
+			runtimeRequirements.add(RuntimeGlobals.exports);
+			runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
+			definePart = `/* harmony export */ ${RuntimeGlobals.definePropertyGetters}(${
+				this.exportsArgument
+			}, {${definitions.join(",")}\n/* harmony export */ });\n`;
+		}
 		return `${definePart}${unusedPart}`;
 	}
 }

package/lib/dependencies/HtmlInlineScriptDependency.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
+const HtmlGenerator = require("../html/HtmlGenerator");
 const makeSerializable = require("../util/makeSerializable");
-const CssUrlDependency = require("./CssUrlDependency");
 const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
@@ -101,19 +101,8 @@ HtmlInlineScriptDependency.Template = class HtmlInlineScriptDependencyTemplate e
 
 		if (entrypoint) {
 			const chunk = /** @type {Chunk} */ (entrypoint.getEntrypointChunk());
-			const outputOptions = runtimeTemplate.outputOptions;
-			const filenameTemplate =
-				chunk.filenameTemplate ||
-				(chunk.canBeInitial()
-					? outputOptions.filename
-					: outputOptions.chunkFilename);
-
-			const filename = compilation.getPath(filenameTemplate, {
-				chunk,
-				contentHashType: "javascript"
-			});
-
-			url = `${CssUrlDependency.PUBLIC_PATH_AUTO}${filename}`;
+			// Defer chunk-URL substitution to renderManifest — chunk hashes aren't ready yet.
+			url = HtmlGenerator.makeChunkUrlSentinel(chunk, "javascript");
 		}
 
 		// Insert ` src="…"` right after `<script` so the inline body is

package/lib/dependencies/HtmlInlineStyleDependency.js

@@ -10,12 +10,15 @@ const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../javascript/JavascriptParser").Range} Range */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
 /**
@@ -45,6 +48,20 @@ class HtmlInlineStyleDependency extends ModuleDependency {
 		return "html-style";
 	}
 
+	/**
+	 * Updates the hash with the data contributed by this instance.
+	 * @param {Hash} hash hash to be updated
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		// Recurse so the inline CSS's transitive deps (e.g. `url(asset)`) propagate up.
+		const { chunkGraph } = context;
+		const module = chunkGraph.moduleGraph.getModule(this);
+		if (!module) return;
+		module.updateHash(hash, context);
+	}
+
 	/**
 	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context

package/lib/dependencies/HtmlScriptSrcDependency.js

@@ -9,8 +9,8 @@ const {
 	CSS_TYPE,
 	JAVASCRIPT_TYPE
 } = require("../ModuleSourceTypeConstants");
+const HtmlGenerator = require("../html/HtmlGenerator");
 const makeSerializable = require("../util/makeSerializable");
-const CssUrlDependency = require("./CssUrlDependency");
 const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
@@ -95,39 +95,6 @@ class HtmlScriptSrcDependency extends ModuleDependency {
 	}
 }
 
-/**
- * @param {Chunk} chunk a chunk
- * @param {import("../Compilation")} compilation compilation
- * @param {"javascript" | "css"} contentHashType which content hash to plug into the filename template
- * @returns {string} chunk filename path (no public-path prefix)
- */
-const getChunkFilename = (chunk, compilation, contentHashType) => {
-	const outputOptions = compilation.outputOptions;
-	let filenameTemplate;
-	if (contentHashType === "css") {
-		// For a CSS-typed chunk, use the same template the CSS pipeline
-		// will use when it actually emits the `.css` file, so the `<link
-		// rel="stylesheet" href>` URL we write into the HTML matches the
-		// asset on disk.
-		filenameTemplate =
-			require("../css/CssModulesPlugin").getChunkFilenameTemplate(
-				chunk,
-				outputOptions
-			);
-	} else {
-		filenameTemplate =
-			chunk.filenameTemplate ||
-			(chunk.canBeInitial()
-				? outputOptions.filename
-				: outputOptions.chunkFilename);
-	}
-
-	return compilation.getPath(filenameTemplate, {
-		chunk,
-		contentHashType
-	});
-};
-
 /**
  * @param {Entrypoint} entrypoint entrypoint
  * @returns {Chunk[]} every chunk this entrypoint needs in load order: the
@@ -410,15 +377,13 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 		const entryChunk = orderedChunks[orderedChunks.length - 1];
 		const isStylesheet = dep.elementKind === "stylesheet";
 
-		// Rewrite the originating tag's src/href to the entry chunk's
-		// primary asset for that element kind: `.css` for
-		// `<link rel="stylesheet">`, `.js` for everything else.
+		// Rewrite src/href to a chunk-URL sentinel (resolved by renderManifest):
+		// `.css` for `<link rel="stylesheet">`, `.js` for everything else.
 		const entryContentHashType = isStylesheet ? "css" : "javascript";
-		const entryUrl = `${CssUrlDependency.PUBLIC_PATH_AUTO}${getChunkFilename(
+		const entryUrl = HtmlGenerator.makeChunkUrlSentinel(
 			entryChunk,
-			compilation,
 			entryContentHashType
-		)}`;
+		);
 		source.replace(dep.range[0], dep.range[1] - 1, entryUrl);
 
 		if (dep.tagStart < 0 || dep.tagOpenEnd <= dep.tagStart) {
@@ -446,11 +411,7 @@ HtmlScriptSrcDependency.Template = class HtmlScriptSrcDependencyTemplate extends
 		 * @returns {string} a single sibling tag's HTML
 		 */
 		const buildSibling = (chunk, kind) => {
-			const url = `${CssUrlDependency.PUBLIC_PATH_AUTO}${getChunkFilename(
-				chunk,
-				compilation,
-				kind
-			)}`;
+			const url = HtmlGenerator.makeChunkUrlSentinel(chunk, kind);
 			if (kind === "css" && !isStylesheet) {
 				// Originating tag is `<script>` (or `<link rel=modulepreload>`)
 				// but this chunk is CSS — emit a fresh `<link>` rather than

package/lib/dependencies/HtmlSourceDependency.js

@@ -13,14 +13,17 @@ const ModuleDependency = require("./ModuleDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../Module").CodeGenerationResultData} CodeGenerationResultData */
 /** @typedef {import("../javascript/JavascriptParser").Range} Range */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
+/** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
 const getIgnoredRawDataUrlModule = memoize(
@@ -55,6 +58,21 @@ class HtmlSourceDependency extends ModuleDependency {
 		return getIgnoredRawDataUrlModule();
 	}
 
+	/**
+	 * Updates the hash with the data contributed by this instance.
+	 * @param {Hash} hash hash to be updated
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		// Fold in the asset's hash so the HTML invalidates when the embedded URL changes.
+		const { chunkGraph } = context;
+		const module = chunkGraph.moduleGraph.getModule(this);
+		if (!module) return;
+		const { hash: buildHash } = /** @type {BuildInfo} */ (module.buildInfo);
+		if (buildHash) hash.update(buildHash);
+	}
+
 	/**
 	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context

package/lib/dependencies/WorkerPlugin.js

@@ -349,10 +349,24 @@ class WorkerPlugin {
 										)
 									);
 								} else {
-									Object.assign(
-										entryOptions,
-										importOptions.webpackEntryOptions
-									);
+									// `webpackEntryOptions` is user input from a magic
+									// comment, so copy only safe own keys to avoid
+									// prototype pollution via `__proto__`/`constructor`/
+									// `prototype`.
+									const userEntryOptions = importOptions.webpackEntryOptions;
+									for (const key of Object.keys(userEntryOptions)) {
+										if (
+											key === "__proto__" ||
+											key === "constructor" ||
+											key === "prototype"
+										) {
+											continue;
+										}
+										/** @type {EXPECTED_ANY} */
+										(entryOptions)[key] = /** @type {EXPECTED_ANY} */ (
+											userEntryOptions
+										)[key];
+									}
 								}
 							}
 							if (importOptions.webpackChunkName !== undefined) {

package/lib/hmr/LazyCompilationPlugin.js

@@ -18,6 +18,7 @@ const {
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const CommonJsRequireDependency = require("../dependencies/CommonJsRequireDependency");
+const { resolveByProperty } = require("../util/cleverMerge");
 const { registerNotSerializable } = require("../util/serialization");
 
 /** @typedef {import("../config/defaults").WebpackOptionsNormalizedWithDefaults} WebpackOptions */
@@ -45,6 +46,96 @@ const { registerNotSerializable } = require("../util/serialization");
 
 /** @typedef {{ client: string, data: string, active: boolean }} ModuleResult */
 
+/**
+ * Library wrappers of these types pass external modules as closure arguments
+ * (e.g. `__WEBPACK_EXTERNAL_MODULE_react__`) baked into the entry chunk at
+ * render time. When `lazyCompilation` activates a proxy for the first time,
+ * any external dependency the lazily-built module pulls in lands in a hot
+ * update chunk that lives outside the original wrapper closure, so the
+ * factory body can't resolve its closure identifier and throws at runtime.
+ * Reserving the externals up front (during the inactive build) folds them
+ * into the initial wrapper, so the closure identifiers are already defined
+ * when the activation update arrives.
+ */
+const CLOSURE_LIBRARY_TYPES = new Set([
+	"umd",
+	"umd2",
+	"amd",
+	"amd-require",
+	"system"
+]);
+
+/**
+ * `enabledLibraryTypes` covers both the global `output.library.type` and any
+ * per-entry `entry.<name>.library.type`, so a UMD/AMD/System wrapper attached
+ * to an individual entry is still detected.
+ * @param {import("../../declarations/WebpackOptions").OutputNormalized} output normalized output option
+ * @returns {boolean} true when at least one library wrapper passes externals as closure arguments
+ */
+const hasClosureLibrary = (output) => {
+	const enabled = output.enabledLibraryTypes;
+	if (enabled) {
+		for (const type of enabled) {
+			if (CLOSURE_LIBRARY_TYPES.has(type)) return true;
+		}
+	}
+	if (output.library && output.library.type) {
+		return CLOSURE_LIBRARY_TYPES.has(output.library.type);
+	}
+	return false;
+};
+
+/**
+ * Collects request strings from statically-enumerable externals (string,
+ * object, and arrays of those). Function and RegExp forms are skipped because
+ * their effective request set isn't knowable until something asks for it.
+ *
+ * Layer resolution mirrors `ExternalModuleFactoryPlugin.resolveLayer`: the
+ * effective map for the proxy's layer is computed via the same
+ * `resolveByProperty(..., "byLayer", layer)` helper that the externals system
+ * uses, so `byLayer.default` fallback and function-form `byLayer` entries are
+ * honored the same way.
+ *
+ * Entries whose effective value is `false` are skipped — `false` explicitly
+ * disables externalization for that request, and reserving it would force the
+ * real module into the entry chunk.
+ * @param {import("../../declarations/WebpackOptions").Externals | undefined} externals normalized externals option
+ * @param {string | null} layer issuer layer for which to resolve `byLayer`
+ * @returns {Set<string>} requests to reserve in the entry chunk
+ */
+const collectStaticExternalRequests = (externals, layer) => {
+	/** @type {Set<string>} */
+	const requests = new Set();
+	if (!externals) return requests;
+	/** @param {import("../../declarations/WebpackOptions").ExternalItem} item one item */
+	const visit = (item) => {
+		if (typeof item === "string") {
+			requests.add(item);
+			return;
+		}
+		if (!item || typeof item !== "object" || item instanceof RegExp) return;
+		const resolved = /** @type {Record<string, unknown>} */ (
+			resolveByProperty(
+				/** @type {Record<string, unknown>} */ (item),
+				"byLayer",
+				layer
+			)
+		);
+		for (const [request, value] of Object.entries(resolved)) {
+			// `false` explicitly opts the request out of externalization; reserving
+			// it would pull the actual module into the entry chunk.
+			if (value === false) continue;
+			requests.add(request);
+		}
+	};
+	if (Array.isArray(externals)) {
+		for (const item of externals) visit(item);
+	} else {
+		visit(externals);
+	}
+	return requests;
+};
+
 /**
  * Defines the backend api type used by this module.
  * @typedef {object} BackendApi
@@ -213,6 +304,19 @@ class LazyCompilationProxyModule extends Module {
 			const block = new AsyncDependenciesBlock({});
 			block.addDependency(dep);
 			this.addBlock(block);
+		} else if (hasClosureLibrary(compilation.options.output)) {
+			// Reserve statically-declared externals as dependencies of the inactive
+			// proxy so the initial entry chunk's library wrapper already exposes
+			// their closure identifiers (e.g. `__WEBPACK_EXTERNAL_MODULE_react__`).
+			// Once the proxy activates and the lazily-built module references those
+			// externals, the identifiers resolve normally instead of throwing.
+			const requests = collectStaticExternalRequests(
+				options.externals,
+				this.layer
+			);
+			for (const request of requests) {
+				this.addDependency(new CommonJsRequireDependency(request));
+			}
 		}
 		callback();
 	}