webpack 5.104.1 → 5.105.0

package/lib/ContextModule.js

@@ -17,6 +17,10 @@ const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
 const WebpackError = require("./WebpackError");
+const {
+	getOutgoingAsyncModules
+} = require("./async-modules/AsyncModuleHelpers");
+const { ImportPhase, ImportPhaseUtils } = require("./dependencies/ImportPhase");
 const {
 	compareLocations,
 	compareModulesById,
@@ -54,6 +58,8 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./Module").LibIdent} LibIdent */
 /** @typedef {import("./Module").NeedBuildCallback} NeedBuildCallback */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("./Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("./Module").Sources} Sources */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
@@ -62,6 +68,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
 /** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
+/** @typedef {import("./dependencies/ImportPhase").ImportPhaseType} ImportPhaseType */
 
 /** @typedef {"sync" | "eager" | "weak" | "async-weak" | "lazy" | "lazy-once"} ContextMode Context mode */
 
@@ -81,6 +88,7 @@ const makeSerializable = require("./util/makeSerializable");
  * @property {RawReferencedExports | null=} referencedExports exports referenced from modules (won't be mangled)
  * @property {string | null=} layer
  * @property {ImportAttributes=} attributes
+ * @property {ImportPhaseType=} phase
  */
 
 /**
@@ -110,6 +118,7 @@ const makeSerializable = require("./util/makeSerializable");
 /** @typedef {1 | 3 | 7 | 9} FakeMapType */
 
 /** @typedef {Record<ModuleId, FakeMapType>} FakeMap */
+/** @typedef {Record<string, ModuleId>} UserRequestMap */
 
 class ContextModule extends Module {
 	/**
@@ -260,6 +269,9 @@ class ContextModule extends Module {
 		if (this.options.attributes) {
 			identifier += `|importAttributes: ${JSON.stringify(this.options.attributes)}`;
 		}
+		if (this.options.phase) {
+			identifier += `|importPhase: ${this.options.phase}`;
+		}
 		if (this.layer) {
 			identifier += `|layer: ${this.layer}`;
 		}
@@ -278,7 +290,9 @@ class ContextModule extends Module {
 	 * @returns {string} a user readable identifier of the module
 	 */
 	readableIdentifier(requestShortener) {
+		/** @type {string} */
 		let identifier;
+
 		if (this.context) {
 			identifier = `${requestShortener.shorten(this.context)}/`;
 		} else if (
@@ -342,6 +356,7 @@ class ContextModule extends Module {
 	 * @returns {LibIdent | null} an identifier for library inclusion
 	 */
 	libIdent(options) {
+		/** @type {string} */
 		let identifier;
 
 		if (this.context) {
@@ -509,7 +524,7 @@ class ContextModule extends Module {
 				for (const dep of dependencies) {
 					let chunkName = this.options.chunkName;
 					if (chunkName) {
-						if (!/\[(index|request)\]/.test(chunkName)) {
+						if (!/\[(?:index|request)\]/.test(chunkName)) {
 							chunkName += "[index]";
 						}
 						chunkName = chunkName.replace(/\[index\]/g, `${index++}`);
@@ -585,7 +600,7 @@ class ContextModule extends Module {
 	/**
 	 * @param {Dependency[]} dependencies all dependencies
 	 * @param {ChunkGraph} chunkGraph chunk graph
-	 * @returns {Map<string, ModuleId>} map with user requests
+	 * @returns {UserRequestMap} map with user requests
 	 */
 	getUserRequestMap(dependencies, chunkGraph) {
 		const moduleGraph = chunkGraph.moduleGraph;
@@ -602,10 +617,13 @@ class ContextModule extends Module {
 					}
 					return a.userRequest < b.userRequest ? -1 : 1;
 				});
+		/** @type {UserRequestMap} */
 		const map = Object.create(null);
 		for (const dep of sortedDependencies) {
 			const module = /** @type {Module} */ (moduleGraph.getModule(dep));
-			map[dep.userRequest] = chunkGraph.getModuleId(module);
+			map[dep.userRequest] =
+				/** @type {ModuleId} */
+				(chunkGraph.getModuleId(module));
 		}
 		return map;
 	}
@@ -690,6 +708,47 @@ class ContextModule extends Module {
 			: "";
 	}
 
+	/**
+	 * @param {Dependency[]} dependencies all dependencies
+	 * @param {ChunkGraph} chunkGraph chunk graph
+	 * @returns {Map<string, ModuleId[] | undefined>} map with user requests
+	 */
+	getModuleDeferredAsyncDepsMap(dependencies, chunkGraph) {
+		const moduleGraph = chunkGraph.moduleGraph;
+		const comparator = compareModulesById(chunkGraph);
+		// if we filter first we get a new array
+		// therefore we don't need to create a clone of dependencies explicitly
+		// therefore the order of this is !important!
+		const sortedModules = dependencies
+			.map(
+				(dependency) =>
+					/** @type {Module} */ (moduleGraph.getModule(dependency))
+			)
+			.filter(Boolean)
+			.sort(comparator);
+		const map = Object.create(null);
+		for (const module of sortedModules) {
+			if (!(/** @type {BuildMeta} */ (module.buildMeta).async)) {
+				const id = /** @type {ModuleId} */ (chunkGraph.getModuleId(module));
+				map[id] = Array.from(
+					getOutgoingAsyncModules(chunkGraph.moduleGraph, module),
+					(m) => chunkGraph.getModuleId(m)
+				).filter((id) => id !== null);
+			}
+		}
+		return map;
+	}
+
+	/**
+	 * @param {false | Map<string, ModuleId[] | undefined>} asyncDepsMap fake map
+	 * @returns {string} async deps map init statement
+	 */
+	getModuleDeferredAsyncDepsMapInitStatement(asyncDepsMap) {
+		return typeof asyncDepsMap === "object"
+			? `var asyncDepsMap = ${JSON.stringify(asyncDepsMap, null, "\t")};`
+			: "";
+	}
+
 	/**
 	 * @param {FakeMapType} type type
 	 * @param {boolean=} asyncModule is async module
@@ -706,21 +765,30 @@ class ContextModule extends Module {
 
 	/**
 	 * @param {FakeMap | FakeMapType} fakeMap fake map
-	 * @param {boolean=} asyncModule us async module
+	 * @param {boolean=} asyncModule is async module
+	 * @param {string=} asyncDeps async deps for deferred module
 	 * @param {string=} fakeMapDataExpression fake map data expression
 	 * @returns {string} module object source
 	 */
 	getReturnModuleObjectSource(
 		fakeMap,
 		asyncModule,
+		asyncDeps,
 		fakeMapDataExpression = "fakeMap[id]"
 	) {
-		if (typeof fakeMap === "number") {
-			return `return ${this.getReturn(fakeMap, asyncModule)};`;
+		const source =
+			typeof fakeMap === "number"
+				? this.getReturn(fakeMap, asyncModule)
+				: `${RuntimeGlobals.createFakeNamespaceObject}(id, ${fakeMapDataExpression}${asyncModule ? " | 16" : ""})`;
+		if (asyncDeps) {
+			if (!asyncModule) {
+				throw new Error("Must be async when module is deferred");
+			}
+			const type =
+				typeof fakeMap === "number" ? fakeMap : fakeMapDataExpression;
+			return `${asyncDeps} ? ${asyncDeps}.length ? ${RuntimeGlobals.deferredModuleAsyncTransitiveDependencies}(${asyncDeps}).then(${RuntimeGlobals.makeDeferredNamespaceObject}.bind(${RuntimeGlobals.require}, id, ${type} ^ 1, true)) : ${RuntimeGlobals.makeDeferredNamespaceObject}(id, ${type} ^ 1 | 16) : ${source}`;
 		}
-		return `return ${
-			RuntimeGlobals.createFakeNamespaceObject
-		}(id, ${fakeMapDataExpression}${asyncModule ? " | 16" : ""})`;
+		return source;
 	}
 
 	/**
@@ -739,7 +807,7 @@ ${this.getFakeMapInitStatement(fakeMap)}
 
 function webpackContext(req) {
 	var id = webpackContextResolve(req);
-	${returnModuleObject}
+	return ${returnModuleObject};
 }
 function webpackContextResolve(req) {
 	if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
@@ -778,7 +846,7 @@ function webpackContext(req) {
 		e.code = 'MODULE_NOT_FOUND';
 		throw e;
 	}
-	${returnModuleObject}
+	return ${returnModuleObject};
 }
 function webpackContextResolve(req) {
 	if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
@@ -799,43 +867,56 @@ module.exports = webpackContext;`;
 	/**
 	 * @param {Dependency[]} dependencies dependencies
 	 * @param {ModuleId} id module id
+	 * @param {ImportPhaseType} phase import phase
 	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
 	 */
-	getAsyncWeakSource(dependencies, id, { chunkGraph, runtimeTemplate }) {
-		const arrow = runtimeTemplate.supportsArrowFunction();
+	getAsyncWeakSource(dependencies, id, phase, { chunkGraph, runtimeTemplate }) {
 		const map = this.getUserRequestMap(dependencies, chunkGraph);
 		const fakeMap = this.getFakeMap(dependencies, chunkGraph);
-		const returnModuleObject = this.getReturnModuleObjectSource(fakeMap, true);
+		const asyncDepsMap =
+			ImportPhaseUtils.isDefer(phase) &&
+			this.getModuleDeferredAsyncDepsMap(dependencies, chunkGraph);
+		const returnModuleObject = this.getReturnModuleObjectSource(
+			fakeMap,
+			true,
+			asyncDepsMap ? "asyncDepsMap[id]" : undefined
+		);
 
 		return `var map = ${JSON.stringify(map, null, "\t")};
 ${this.getFakeMapInitStatement(fakeMap)}
+${this.getModuleDeferredAsyncDepsMapInitStatement(asyncDepsMap)}
 
 function webpackAsyncContext(req) {
-	return webpackAsyncContextResolve(req).then(${
-		arrow ? "id =>" : "function(id)"
-	} {
-		if(!${RuntimeGlobals.moduleFactories}[id]) {
-			var e = new Error("Module '" + req + "' ('" + id + "') is not available (weak dependency)");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		}
-		${returnModuleObject}
-	});
+	return webpackAsyncContextResolve(req).then(${runtimeTemplate.basicFunction(
+		"id",
+		[
+			`if(!${RuntimeGlobals.moduleFactories}[id]) {`,
+			Template.indent([
+				'var e = new Error("Module \'" + req + "\' (\'" + id + "\') is not available (weak dependency)");',
+				"e.code = 'MODULE_NOT_FOUND';",
+				"throw e;"
+			]),
+			"}",
+			`return ${returnModuleObject};`
+		]
+	)});
 }
 function webpackAsyncContextResolve(req) {
 	// Here Promise.resolve().then() is used instead of new Promise() to prevent
 	// uncaught exception popping up in devtools
-	return Promise.resolve().then(${arrow ? "() =>" : "function()"} {
-		if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
-			var e = new Error("Cannot find module '" + req + "'");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		}
-		return map[req];
-	});
+	return Promise.resolve().then(${runtimeTemplate.basicFunction("", [
+		`if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {`,
+		Template.indent([
+			'var e = new Error("Cannot find module \'" + req + "\'");',
+			"e.code = 'MODULE_NOT_FOUND';",
+			"throw e;"
+		]),
+		"}",
+		"return map[req];"
+	])});
 }
 webpackAsyncContext.keys = ${runtimeTemplate.returningFunction(
 			"Object.keys(map)"
@@ -848,23 +929,30 @@ module.exports = webpackAsyncContext;`;
 	/**
 	 * @param {Dependency[]} dependencies dependencies
 	 * @param {ModuleId} id module id
+	 * @param {ImportPhaseType} phase import phase
 	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
 	 */
-	getEagerSource(dependencies, id, { chunkGraph, runtimeTemplate }) {
-		const arrow = runtimeTemplate.supportsArrowFunction();
+	getEagerSource(dependencies, id, phase, { chunkGraph, runtimeTemplate }) {
 		const map = this.getUserRequestMap(dependencies, chunkGraph);
 		const fakeMap = this.getFakeMap(dependencies, chunkGraph);
-		const thenFunction =
-			fakeMap !== 9
-				? `${arrow ? "id =>" : "function(id)"} {
-		${this.getReturnModuleObjectSource(fakeMap, true)}
-	}`
-				: RuntimeGlobals.require;
+		const asyncDepsMap =
+			ImportPhaseUtils.isDefer(phase) &&
+			this.getModuleDeferredAsyncDepsMap(dependencies, chunkGraph);
+		const thenFunction = runtimeTemplate.returningFunction(
+			this.getReturnModuleObjectSource(
+				fakeMap,
+				true,
+				asyncDepsMap ? "asyncDepsMap[id]" : undefined
+			),
+			"id"
+		);
+
 		return `var map = ${JSON.stringify(map, null, "\t")};
 ${this.getFakeMapInitStatement(fakeMap)}
+${this.getModuleDeferredAsyncDepsMapInitStatement(asyncDepsMap)}
 
 function webpackAsyncContext(req) {
 	return webpackAsyncContextResolve(req).then(${thenFunction});
@@ -872,14 +960,16 @@ function webpackAsyncContext(req) {
 function webpackAsyncContextResolve(req) {
 	// Here Promise.resolve().then() is used instead of new Promise() to prevent
 	// uncaught exception popping up in devtools
-	return Promise.resolve().then(${arrow ? "() =>" : "function()"} {
-		if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
-			var e = new Error("Cannot find module '" + req + "'");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		}
-		return map[req];
-	});
+	return Promise.resolve().then(${runtimeTemplate.basicFunction("", [
+		`if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {`,
+		Template.indent([
+			'var e = new Error("Cannot find module \'" + req + "\'");',
+			"e.code = 'MODULE_NOT_FOUND';",
+			"throw e;"
+		]),
+		"}",
+		"return map[req];"
+	])});
 }
 webpackAsyncContext.keys = ${runtimeTemplate.returningFunction(
 			"Object.keys(map)"
@@ -893,43 +983,58 @@ module.exports = webpackAsyncContext;`;
 	 * @param {AsyncDependenciesBlock} block block
 	 * @param {Dependency[]} dependencies dependencies
 	 * @param {ModuleId} id module id
+	 * @param {ImportPhaseType} phase import phase
 	 * @param {object} options options object
 	 * @param {RuntimeTemplate} options.runtimeTemplate the runtime template
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @returns {string} source code
 	 */
-	getLazyOnceSource(block, dependencies, id, { runtimeTemplate, chunkGraph }) {
+	getLazyOnceSource(
+		block,
+		dependencies,
+		id,
+		phase,
+		{ runtimeTemplate, chunkGraph }
+	) {
 		const promise = runtimeTemplate.blockPromise({
 			chunkGraph,
 			block,
 			message: "lazy-once context",
+			/** @type {RuntimeRequirements} */
 			runtimeRequirements: new Set()
 		});
-		const arrow = runtimeTemplate.supportsArrowFunction();
 		const map = this.getUserRequestMap(dependencies, chunkGraph);
 		const fakeMap = this.getFakeMap(dependencies, chunkGraph);
-		const thenFunction =
-			fakeMap !== 9
-				? `${arrow ? "id =>" : "function(id)"} {
-		${this.getReturnModuleObjectSource(fakeMap, true)};
-	}`
-				: RuntimeGlobals.require;
+		const asyncDepsMap =
+			ImportPhaseUtils.isDefer(phase) &&
+			this.getModuleDeferredAsyncDepsMap(dependencies, chunkGraph);
+		const thenFunction = runtimeTemplate.returningFunction(
+			this.getReturnModuleObjectSource(
+				fakeMap,
+				true,
+				asyncDepsMap ? "asyncDepsMap[id]" : undefined
+			),
+			"id"
+		);
 
 		return `var map = ${JSON.stringify(map, null, "\t")};
 ${this.getFakeMapInitStatement(fakeMap)}
+${this.getModuleDeferredAsyncDepsMapInitStatement(asyncDepsMap)}
 
 function webpackAsyncContext(req) {
 	return webpackAsyncContextResolve(req).then(${thenFunction});
 }
 function webpackAsyncContextResolve(req) {
-	return ${promise}.then(${arrow ? "() =>" : "function()"} {
-		if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
-			var e = new Error("Cannot find module '" + req + "'");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		}
-		return map[req];
-	});
+	return ${promise}.then(${runtimeTemplate.basicFunction("", [
+		`if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {`,
+		Template.indent([
+			'var e = new Error("Cannot find module \'" + req + "\'");',
+			"e.code = 'MODULE_NOT_FOUND';",
+			"throw e;"
+		]),
+		"}",
+		"return map[req];"
+	])});
 }
 webpackAsyncContext.keys = ${runtimeTemplate.returningFunction(
 			"Object.keys(map)"
@@ -942,22 +1047,23 @@ module.exports = webpackAsyncContext;`;
 	/**
 	 * @param {AsyncDependenciesBlock[]} blocks blocks
 	 * @param {ModuleId} id module id
+	 * @param {ImportPhaseType} phase import phase
 	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
 	 */
-	getLazySource(blocks, id, { chunkGraph, runtimeTemplate }) {
+	getLazySource(blocks, id, phase, { chunkGraph, runtimeTemplate }) {
 		const moduleGraph = chunkGraph.moduleGraph;
-		const arrow = runtimeTemplate.supportsArrowFunction();
 		let hasMultipleOrNoChunks = false;
 		let hasNoChunk = true;
+		let hasNoModuleDeferred = true;
 		const fakeMap = this.getFakeMap(
 			blocks.map((b) => b.dependencies[0]),
 			chunkGraph
 		);
 		const hasFakeMap = typeof fakeMap === "object";
-		/** @typedef {{userRequest: string, dependency: ContextElementDependency, chunks: undefined | Chunk[], module: Module, block: AsyncDependenciesBlock}} Item */
+		/** @typedef {{ userRequest: string, dependency: ContextElementDependency, chunks: undefined | Chunk[], module: Module, block: AsyncDependenciesBlock, asyncDeps: undefined | ModuleId[] }} Item */
 		/**
 		 * @type {Item[]}
 		 */
@@ -971,7 +1077,8 @@ module.exports = webpackAsyncContext;`;
 					module: /** @type {Module} */ (moduleGraph.getModule(dependency)),
 					block,
 					userRequest: dependency.userRequest,
-					chunks: undefined
+					chunks: undefined,
+					asyncDeps: undefined
 				};
 			})
 			.filter((item) => item.module);
@@ -985,13 +1092,24 @@ module.exports = webpackAsyncContext;`;
 			if (chunks.length !== 1) {
 				hasMultipleOrNoChunks = true;
 			}
+			const isModuleDeferred =
+				ImportPhaseUtils.isDefer(phase) &&
+				!(/** @type {BuildMeta} */ (item.module.buildMeta).async);
+			if (isModuleDeferred) {
+				const asyncDeps = Array.from(
+					getOutgoingAsyncModules(chunkGraph.moduleGraph, item.module),
+					(m) => chunkGraph.getModuleId(m)
+				).filter((id) => id !== null);
+				item.asyncDeps = asyncDeps;
+				hasNoModuleDeferred = false;
+			}
 		}
-		const shortMode = hasNoChunk && !hasFakeMap;
+		const shortMode = hasNoChunk && hasNoModuleDeferred && !hasFakeMap;
 		const sortedItems = items.sort((a, b) => {
 			if (a.userRequest === b.userRequest) return 0;
 			return a.userRequest < b.userRequest ? -1 : 1;
 		});
-		/** @type {Record<string, ModuleId | (ModuleId[] | ChunkId[])>} */
+		/** @type {Record<string, ModuleId | (ModuleId | FakeMapType | ChunkId[] | (ModuleId[] | undefined))[]>} */
 		const map = Object.create(null);
 		for (const item of sortedItems) {
 			const moduleId =
@@ -1000,28 +1118,36 @@ module.exports = webpackAsyncContext;`;
 			if (shortMode) {
 				map[item.userRequest] = moduleId;
 			} else {
-				/** @type {(ModuleId | ChunkId)[]} */
-				const arrayStart = [moduleId];
+				/** @type {(ModuleId | FakeMapType | ChunkId[] | (ModuleId[] | undefined))[]} */
+				const array = [moduleId];
 				if (hasFakeMap) {
-					arrayStart.push(fakeMap[moduleId]);
+					array.push(fakeMap[moduleId]);
+				}
+				if (!hasNoChunk) {
+					array.push(
+						/** @type {Chunk[]} */ (item.chunks).map(
+							(chunk) => /** @type {ChunkId} */ (chunk.id)
+						)
+					);
 				}
-				map[item.userRequest] = [
-					...arrayStart,
-					.../** @type {Chunk[]} */
-					(item.chunks).map((chunk) => /** @type {ChunkId} */ (chunk.id))
-				];
+				if (!hasNoModuleDeferred) {
+					array.push(item.asyncDeps);
+				}
+				map[item.userRequest] = array;
 			}
 		}
 
-		const chunksStartPosition = hasFakeMap ? 2 : 1;
+		const chunksPosition = hasFakeMap ? 2 : 1;
+		const asyncDepsPosition = chunksPosition + 1;
 		const requestPrefix = hasNoChunk
 			? "Promise.resolve()"
 			: hasMultipleOrNoChunks
-				? `Promise.all(ids.slice(${chunksStartPosition}).map(${RuntimeGlobals.ensureChunk}))`
-				: `${RuntimeGlobals.ensureChunk}(ids[${chunksStartPosition}])`;
+				? `Promise.all(ids[${chunksPosition}].map(${RuntimeGlobals.ensureChunk}))`
+				: `${RuntimeGlobals.ensureChunk}(ids[${chunksPosition}][0])`;
 		const returnModuleObject = this.getReturnModuleObjectSource(
 			fakeMap,
 			true,
+			hasNoModuleDeferred ? undefined : `ids[${asyncDepsPosition}]`,
 			shortMode ? "invalid" : "ids[1]"
 		);
 
@@ -1029,30 +1155,29 @@ module.exports = webpackAsyncContext;`;
 			requestPrefix === "Promise.resolve()"
 				? `
 function webpackAsyncContext(req) {
-	return Promise.resolve().then(${arrow ? "() =>" : "function()"} {
-		if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
-			var e = new Error("Cannot find module '" + req + "'");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		}
-
-		${shortMode ? "var id = map[req];" : "var ids = map[req], id = ids[0];"}
-		${returnModuleObject}
-	});
+	return Promise.resolve().then(${runtimeTemplate.basicFunction("", [
+		`if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {`,
+		Template.indent([
+			'var e = new Error("Cannot find module \'" + req + "\'");',
+			"e.code = 'MODULE_NOT_FOUND';",
+			"throw e;"
+		]),
+		"}",
+		shortMode ? "var id = map[req];" : "var ids = map[req], id = ids[0];",
+		`return ${returnModuleObject};`
+	])});
 }`
 				: `function webpackAsyncContext(req) {
 	if(!${RuntimeGlobals.hasOwnProperty}(map, req)) {
-		return Promise.resolve().then(${arrow ? "() =>" : "function()"} {
-			var e = new Error("Cannot find module '" + req + "'");
-			e.code = 'MODULE_NOT_FOUND';
-			throw e;
-		});
+		return Promise.resolve().then(${runtimeTemplate.basicFunction("", [
+			'var e = new Error("Cannot find module \'" + req + "\'");',
+			"e.code = 'MODULE_NOT_FOUND';",
+			"throw e;"
+		])});
 	}
 
 	var ids = map[req], id = ids[0];
-	return ${requestPrefix}.then(${arrow ? "() =>" : "function()"} {
-		${returnModuleObject}
-	});
+	return ${requestPrefix}.then(${runtimeTemplate.returningFunction(returnModuleObject)});
 }`;
 
 		return `var map = ${JSON.stringify(map, null, "\t")};
@@ -1087,15 +1212,14 @@ module.exports = webpackEmptyContext;`;
 	 * @returns {string} source for empty async context
 	 */
 	getSourceForEmptyAsyncContext(id, runtimeTemplate) {
-		const arrow = runtimeTemplate.supportsArrowFunction();
 		return `function webpackEmptyAsyncContext(req) {
 	// Here Promise.resolve().then() is used instead of new Promise() to prevent
 	// uncaught exception popping up in devtools
-	return Promise.resolve().then(${arrow ? "() =>" : "function()"} {
-		var e = new Error("Cannot find module '" + req + "'");
-		e.code = 'MODULE_NOT_FOUND';
-		throw e;
-	});
+	return Promise.resolve().then(${runtimeTemplate.basicFunction("", [
+		'var e = new Error("Cannot find module \'" + req + "\'");',
+		"e.code = 'MODULE_NOT_FOUND';",
+		"throw e;"
+	])});
 }
 webpackEmptyAsyncContext.keys = ${runtimeTemplate.returningFunction("[]")};
 webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
@@ -1105,14 +1229,15 @@ module.exports = webpackEmptyAsyncContext;`;
 
 	/**
 	 * @param {string} asyncMode module mode
+	 * @param {ImportPhaseType} phase import phase
 	 * @param {CodeGenerationContext} context context info
 	 * @returns {string} the source code
 	 */
-	getSourceString(asyncMode, { runtimeTemplate, chunkGraph }) {
+	getSourceString(asyncMode, phase, { runtimeTemplate, chunkGraph }) {
 		const id = /** @type {ModuleId} */ (chunkGraph.getModuleId(this));
 		if (asyncMode === "lazy") {
 			if (this.blocks && this.blocks.length > 0) {
-				return this.getLazySource(this.blocks, id, {
+				return this.getLazySource(this.blocks, id, phase, {
 					runtimeTemplate,
 					chunkGraph
 				});
@@ -1121,7 +1246,7 @@ module.exports = webpackEmptyAsyncContext;`;
 		}
 		if (asyncMode === "eager") {
 			if (this.dependencies && this.dependencies.length > 0) {
-				return this.getEagerSource(this.dependencies, id, {
+				return this.getEagerSource(this.dependencies, id, phase, {
 					chunkGraph,
 					runtimeTemplate
 				});
@@ -1131,7 +1256,7 @@ module.exports = webpackEmptyAsyncContext;`;
 		if (asyncMode === "lazy-once") {
 			const block = this.blocks[0];
 			if (block) {
-				return this.getLazyOnceSource(block, block.dependencies, id, {
+				return this.getLazyOnceSource(block, block.dependencies, id, phase, {
 					runtimeTemplate,
 					chunkGraph
 				});
@@ -1140,7 +1265,7 @@ module.exports = webpackEmptyAsyncContext;`;
 		}
 		if (asyncMode === "async-weak") {
 			if (this.dependencies && this.dependencies.length > 0) {
-				return this.getAsyncWeakSource(this.dependencies, id, {
+				return this.getAsyncWeakSource(this.dependencies, id, phase, {
 					chunkGraph,
 					runtimeTemplate
 				});
@@ -1185,14 +1310,21 @@ module.exports = webpackEmptyAsyncContext;`;
 	 */
 	codeGeneration(context) {
 		const { chunkGraph, compilation } = context;
+
+		/** @type {Sources} */
 		const sources = new Map();
 		sources.set(
 			JAVASCRIPT_TYPE,
 			this.getSource(
-				this.getSourceString(this.options.mode, context),
+				this.getSourceString(
+					this.options.mode,
+					this.options.phase || ImportPhase.Evaluation,
+					context
+				),
 				compilation
 			)
 		);
+		/** @type {RuntimeRequirements} */
 		const set = new Set();
 		const allDeps =
 			this.dependencies.length > 0
@@ -1219,6 +1351,11 @@ module.exports = webpackEmptyAsyncContext;`;
 			if (this.getFakeMap(allDeps, chunkGraph) !== 9) {
 				set.add(RuntimeGlobals.createFakeNamespaceObject);
 			}
+			if (
+				ImportPhaseUtils.isDefer(this.options.phase || ImportPhase.Evaluation)
+			) {
+				set.add(RuntimeGlobals.makeDeferredNamespaceObject);
+			}
 		}
 		return {
 			sources,