webpack 5.99.8 → 5.100.0

package/lib/dependencies/HarmonyExportDependencyParserPlugin.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const WebpackError = require("../WebpackError");
 const { getImportAttributes } = require("../javascript/JavascriptParser");
 const InnerGraph = require("../optimize/InnerGraph");
 const ConstDependency = require("./ConstDependency");
@@ -14,6 +15,7 @@ const HarmonyExportImportedSpecifierDependency = require("./HarmonyExportImporte
 const HarmonyExportSpecifierDependency = require("./HarmonyExportSpecifierDependency");
 const { ExportPresenceModes } = require("./HarmonyImportDependency");
 const {
+	getImportMode,
 	harmonySpecifierTag
 } = require("./HarmonyImportDependencyParserPlugin");
 const HarmonyImportSideEffectDependency = require("./HarmonyImportSideEffectDependency");
@@ -26,11 +28,14 @@ const HarmonyImportSideEffectDependency = require("./HarmonyImportSideEffectDepe
 
 const { HarmonyStarExportsList } = HarmonyExportImportedSpecifierDependency;
 
+const PLUGIN_NAME = "HarmonyExportDependencyParserPlugin";
+
 module.exports = class HarmonyExportDependencyParserPlugin {
 	/**
 	 * @param {import("../../declarations/WebpackOptions").JavascriptParserOptions} options options
+	 * @param {boolean=} deferImport defer import enabled
 	 */
-	constructor(options) {
+	constructor(options, deferImport) {
 		this.exportPresenceMode =
 			options.reexportExportsPresence !== undefined
 				? ExportPresenceModes.fromUserOption(options.reexportExportsPresence)
@@ -39,6 +44,7 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 					: options.strictExportPresence
 						? ExportPresenceModes.ERROR
 						: ExportPresenceModes.AUTO;
+		this.deferImport = deferImport;
 	}
 
 	/**
@@ -47,107 +53,111 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 	 */
 	apply(parser) {
 		const { exportPresenceMode } = this;
-		parser.hooks.export.tap(
-			"HarmonyExportDependencyParserPlugin",
-			statement => {
-				const dep = new HarmonyExportHeaderDependency(
-					/** @type {Range | false} */ (
-						statement.declaration && statement.declaration.range
-					),
-					/** @type {Range} */ (statement.range)
-				);
-				dep.loc = Object.create(
-					/** @type {DependencyLocation} */ (statement.loc)
+		parser.hooks.export.tap(PLUGIN_NAME, statement => {
+			const dep = new HarmonyExportHeaderDependency(
+				/** @type {Range | false} */ (
+					statement.declaration && statement.declaration.range
+				),
+				/** @type {Range} */ (statement.range)
+			);
+			dep.loc = Object.create(
+				/** @type {DependencyLocation} */ (statement.loc)
+			);
+			dep.loc.index = -1;
+			parser.state.module.addPresentationalDependency(dep);
+			return true;
+		});
+		parser.hooks.exportImport.tap(PLUGIN_NAME, (statement, source) => {
+			parser.state.lastHarmonyImportOrder =
+				(parser.state.lastHarmonyImportOrder || 0) + 1;
+			const clearDep = new ConstDependency(
+				"",
+				/** @type {Range} */ (statement.range)
+			);
+			clearDep.loc = /** @type {DependencyLocation} */ (statement.loc);
+			clearDep.loc.index = -1;
+			parser.state.module.addPresentationalDependency(clearDep);
+			const { defer } = getImportMode(
+				parser,
+				statement,
+				this.deferImport,
+				true
+			);
+			if (defer) {
+				const error = new WebpackError(
+					"Deferred re-export (`export defer * as namespace from '...'`) is not a part of the Import Defer proposal.\nUse the following code instead:\n    import defer * as namespace from '...';\n    export { namespace };"
 				);
-				dep.loc.index = -1;
-				parser.state.module.addPresentationalDependency(dep);
-				return true;
-			}
-		);
-		parser.hooks.exportImport.tap(
-			"HarmonyExportDependencyParserPlugin",
-			(statement, source) => {
-				parser.state.lastHarmonyImportOrder =
-					(parser.state.lastHarmonyImportOrder || 0) + 1;
-				const clearDep = new ConstDependency(
-					"",
-					/** @type {Range} */ (statement.range)
-				);
-				clearDep.loc = /** @type {DependencyLocation} */ (statement.loc);
-				clearDep.loc.index = -1;
-				parser.state.module.addPresentationalDependency(clearDep);
-				const sideEffectDep = new HarmonyImportSideEffectDependency(
-					/** @type {string} */ (source),
-					parser.state.lastHarmonyImportOrder,
-					getImportAttributes(statement)
-				);
-				sideEffectDep.loc = Object.create(
-					/** @type {DependencyLocation} */ (statement.loc)
-				);
-				sideEffectDep.loc.index = -1;
-				parser.state.current.addDependency(sideEffectDep);
-				return true;
+				error.loc = statement.loc || undefined;
+				parser.state.current.addError(error);
 			}
-		);
-		parser.hooks.exportExpression.tap(
-			"HarmonyExportDependencyParserPlugin",
-			(statement, node) => {
-				const isFunctionDeclaration = node.type === "FunctionDeclaration";
-				const exprRange = /** @type {Range} */ (node.range);
-				const statementRange = /** @type {Range} */ (statement.range);
-				const comments = parser.getComments([statementRange[0], exprRange[0]]);
-				const dep = new HarmonyExportExpressionDependency(
-					exprRange,
-					statementRange,
-					comments
-						.map(c => {
-							switch (c.type) {
-								case "Block":
-									return `/*${c.value}*/`;
-								case "Line":
-									return `//${c.value}\n`;
+			const sideEffectDep = new HarmonyImportSideEffectDependency(
+				/** @type {string} */ (source),
+				parser.state.lastHarmonyImportOrder,
+				getImportAttributes(statement),
+				defer
+			);
+			sideEffectDep.loc = Object.create(
+				/** @type {DependencyLocation} */ (statement.loc)
+			);
+			sideEffectDep.loc.index = -1;
+			parser.state.current.addDependency(sideEffectDep);
+			return true;
+		});
+		parser.hooks.exportExpression.tap(PLUGIN_NAME, (statement, node) => {
+			const isFunctionDeclaration = node.type === "FunctionDeclaration";
+			const exprRange = /** @type {Range} */ (node.range);
+			const statementRange = /** @type {Range} */ (statement.range);
+			const comments = parser.getComments([statementRange[0], exprRange[0]]);
+			const dep = new HarmonyExportExpressionDependency(
+				exprRange,
+				statementRange,
+				comments
+					.map(c => {
+						switch (c.type) {
+							case "Block":
+								return `/*${c.value}*/`;
+							case "Line":
+								return `//${c.value}\n`;
+						}
+						return "";
+					})
+					.join(""),
+				node.type.endsWith("Declaration") &&
+				/** @type {FunctionDeclaration | ClassDeclaration} */ (node).id
+					? /** @type {FunctionDeclaration | ClassDeclaration} */
+						(node).id.name
+					: isFunctionDeclaration
+						? {
+								range: [
+									exprRange[0],
+									node.params.length > 0
+										? /** @type {Range} */ (node.params[0].range)[0]
+										: /** @type {Range} */ (node.body.range)[0]
+								],
+								prefix: `${node.async ? "async " : ""}function${
+									node.generator ? "*" : ""
+								} `,
+								suffix: `(${node.params.length > 0 ? "" : ") "}`
 							}
-							return "";
-						})
-						.join(""),
-					node.type.endsWith("Declaration") &&
+						: undefined
+			);
+			dep.loc = Object.create(
+				/** @type {DependencyLocation} */ (statement.loc)
+			);
+			dep.loc.index = -1;
+			parser.state.current.addDependency(dep);
+			InnerGraph.addVariableUsage(
+				parser,
+				node.type.endsWith("Declaration") &&
 					/** @type {FunctionDeclaration | ClassDeclaration} */ (node).id
-						? /** @type {FunctionDeclaration | ClassDeclaration} */
-							(node).id.name
-						: isFunctionDeclaration
-							? {
-									range: [
-										exprRange[0],
-										node.params.length > 0
-											? /** @type {Range} */ (node.params[0].range)[0]
-											: /** @type {Range} */ (node.body.range)[0]
-									],
-									prefix: `${node.async ? "async " : ""}function${
-										node.generator ? "*" : ""
-									} `,
-									suffix: `(${node.params.length > 0 ? "" : ") "}`
-								}
-							: undefined
-				);
-				dep.loc = Object.create(
-					/** @type {DependencyLocation} */ (statement.loc)
-				);
-				dep.loc.index = -1;
-				parser.state.current.addDependency(dep);
-				InnerGraph.addVariableUsage(
-					parser,
-					node.type.endsWith("Declaration") &&
-						/** @type {FunctionDeclaration | ClassDeclaration} */ (node).id
-						? /** @type {FunctionDeclaration | ClassDeclaration} */ (node).id
-								.name
-						: "*default*",
-					"default"
-				);
-				return true;
-			}
-		);
+					? /** @type {FunctionDeclaration | ClassDeclaration} */ (node).id.name
+					: "*default*",
+				"default"
+			);
+			return true;
+		});
 		parser.hooks.exportSpecifier.tap(
-			"HarmonyExportDependencyParserPlugin",
+			PLUGIN_NAME,
 			(statement, id, name, idx) => {
 				const settings = parser.getTagData(id, harmonySpecifierTag);
 				const harmonyNamedExports = (parser.state.harmonyNamedExports =
@@ -164,7 +174,8 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 							null,
 							exportPresenceMode,
 							null,
-							settings.attributes
+							settings.attributes,
+							settings.defer
 						)
 					: new HarmonyExportSpecifierDependency(id, name);
 				dep.loc = Object.create(
@@ -183,10 +194,11 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 			}
 		);
 		parser.hooks.exportImportSpecifier.tap(
-			"HarmonyExportDependencyParserPlugin",
+			PLUGIN_NAME,
 			(statement, source, id, name, idx) => {
 				const harmonyNamedExports = (parser.state.harmonyNamedExports =
 					parser.state.harmonyNamedExports || new Set());
+				/** @type {InstanceType<HarmonyStarExportsList> | null} */
 				let harmonyStarExports = null;
 				if (name) {
 					harmonyNamedExports.add(name);
@@ -195,16 +207,25 @@ module.exports = class HarmonyExportDependencyParserPlugin {
 						parser.state.harmonyStarExports || new HarmonyStarExportsList();
 				}
 				const attributes = getImportAttributes(statement);
+				const { defer } = getImportMode(
+					parser,
+					statement,
+					this.deferImport,
+					false
+				);
 				const dep = new HarmonyExportImportedSpecifierDependency(
-					/** @type {string} */ (source),
+					/** @type {string} */
+					(source),
 					parser.state.lastHarmonyImportOrder,
 					id ? [id] : [],
 					name,
 					harmonyNamedExports,
+					// eslint-disable-next-line unicorn/prefer-spread
 					harmonyStarExports && harmonyStarExports.slice(),
 					exportPresenceMode,
 					harmonyStarExports,
-					attributes
+					attributes,
+					defer
 				);
 				if (harmonyStarExports) {
 					harmonyStarExports.push(dep);

package/lib/dependencies/HarmonyExportExpressionDependency.js

@@ -27,7 +27,7 @@ class HarmonyExportExpressionDependency extends NullDependency {
 	 * @param {Range} range range
 	 * @param {Range} rangeStatement range statement
 	 * @param {string} prefix prefix
-	 * @param {string | { range: Range, prefix: string, suffix: string }=} declarationId declaration id
+	 * @param {string | { id?: string | undefined, range: Range, prefix: string, suffix: string }=} declarationId declaration id
 	 */
 	constructor(range, rangeStatement, prefix, declarationId) {
 		super();

package/lib/dependencies/HarmonyExportImportedSpecifierDependency.js

@@ -12,15 +12,18 @@ const HarmonyLinkingError = require("../HarmonyLinkingError");
 const InitFragment = require("../InitFragment");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const {
+	getMakeDeferredNamespaceModeFromExportsType
+} = require("../runtime/MakeDeferredNamespaceObjectRuntime");
 const { countIterable } = require("../util/IterableHelpers");
-const { first, combine } = require("../util/SetHelpers");
+const { combine, first } = require("../util/SetHelpers");
 const makeSerializable = require("../util/makeSerializable");
 const propertyAccess = require("../util/propertyAccess");
 const { propertyName } = require("../util/propertyName");
 const {
+	filterRuntime,
 	getRuntimeKey,
-	keyToRuntime,
-	filterRuntime
+	keyToRuntime
 } = require("../util/runtime");
 const HarmonyExportInitFragment = require("./HarmonyExportInitFragment");
 const HarmonyImportDependency = require("./HarmonyImportDependency");
@@ -121,7 +124,7 @@ class ExportMode {
 
 /**
  * @param {ModuleGraph} moduleGraph module graph
- * @param {HarmonyExportImportedSpecifierDependency[]} dependencies dependencies
+ * @param {ReadonlyArray<HarmonyExportImportedSpecifierDependency>} dependencies dependencies
  * @param {TODO=} additionalDependency additional dependency
  * @returns {{ names: Names, dependencyIndices: DependencyIndices }} result
  */
@@ -130,12 +133,13 @@ const determineExportAssignments = (
 	dependencies,
 	additionalDependency
 ) => {
+	/** @type {Set<string>} */
 	const names = new Set();
 	/** @type {number[]} */
 	const dependencyIndices = [];
 
 	if (additionalDependency) {
-		dependencies = dependencies.concat(additionalDependency);
+		dependencies = [...dependencies, additionalDependency];
 	}
 
 	for (const dep of dependencies) {
@@ -158,7 +162,7 @@ const determineExportAssignments = (
 	}
 	dependencyIndices.push(names.size);
 
-	return { names: Array.from(names), dependencyIndices };
+	return { names: [...names], dependencyIndices };
 };
 
 /**
@@ -166,7 +170,7 @@ const determineExportAssignments = (
  * @param {Names} options.names names
  * @param {DependencyIndices} options.dependencyIndices dependency indices
  * @param {string} name name
- * @param {Iterable<HarmonyExportImportedSpecifierDependency>} dependencies dependencies
+ * @param {ReadonlyArray<HarmonyExportImportedSpecifierDependency>} dependencies dependencies
  * @returns {HarmonyExportImportedSpecifierDependency | undefined} found dependency or nothing
  */
 const findDependencyForName = (
@@ -302,7 +306,6 @@ const getMode = (moduleGraph, dep, runtimeKey) => {
 	}
 
 	// Star reexporting
-
 	const { ignoredExports, exports, checked, hidden } = dep.getStarReexports(
 		moduleGraph,
 		runtime,
@@ -371,10 +374,11 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 	 * @param {Ids} ids the requested export name of the imported module
 	 * @param {string | null} name the export name of for this module
 	 * @param {Set<string>} activeExports other named exports in the module
-	 * @param {ReadonlyArray<HarmonyExportImportedSpecifierDependency> | Iterable<HarmonyExportImportedSpecifierDependency> | null} otherStarExports other star exports in the module before this import
+	 * @param {ReadonlyArray<HarmonyExportImportedSpecifierDependency> | null} otherStarExports other star exports in the module before this import
 	 * @param {ExportPresenceMode} exportPresenceMode mode of checking export names
 	 * @param {HarmonyStarExportsList | null} allStarExports all star exports in the module
 	 * @param {ImportAttributes=} attributes import attributes
+	 * @param {boolean=} deferEvaluation defer evaluation
 	 */
 	constructor(
 		request,
@@ -385,7 +389,8 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 		otherStarExports,
 		exportPresenceMode,
 		allStarExports,
-		attributes
+		attributes,
+		deferEvaluation
 	) {
 		super(request, sourceOrder, attributes);
 
@@ -395,6 +400,7 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 		this.otherStarExports = otherStarExports;
 		this.exportPresenceMode = exportPresenceMode;
 		this.allStarExports = allStarExports;
+		this.defer = deferEvaluation;
 	}
 
 	/**
@@ -578,8 +584,9 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 				return Dependency.EXPORTS_OBJECT_REFERENCED;
 
 			case "reexport-named-default": {
-				if (!mode.partialNamespaceExportInfo)
+				if (!mode.partialNamespaceExportInfo) {
 					return Dependency.EXPORTS_OBJECT_REFERENCED;
+				}
 				/** @type {ReferencedExports} */
 				const referencedExports = [];
 				processExportInfo(
@@ -593,8 +600,9 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 
 			case "reexport-namespace-object":
 			case "reexport-fake-namespace-object": {
-				if (!mode.partialNamespaceExportInfo)
+				if (!mode.partialNamespaceExportInfo) {
 					return Dependency.EXPORTS_OBJECT_REFERENCED;
+				}
 				/** @type {ReferencedExports} */
 				const referencedExports = [];
 				processExportInfo(
@@ -658,7 +666,8 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 
 		const { names, dependencyIndices } = moduleGraph.cached(
 			determineExportAssignments,
-			this.otherStarExports,
+			/** @type {HarmonyExportImportedSpecifierDependency[]} */
+			(this.otherStarExports),
 			this
 		);
 
@@ -811,8 +820,9 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 	 * @returns {ExportPresenceMode} effective mode
 	 */
 	_getEffectiveExportPresenceLevel(moduleGraph) {
-		if (this.exportPresenceMode !== ExportPresenceModes.AUTO)
+		if (this.exportPresenceMode !== ExportPresenceModes.AUTO) {
 			return this.exportPresenceMode;
+		}
 		const module = /** @type {Module} */ (moduleGraph.getParentModule(this));
 		return /** @type {BuildMeta} */ (module.buildMeta).strictHarmonyModule
 			? ExportPresenceModes.ERROR
@@ -884,7 +894,7 @@ class HarmonyExportImportedSpecifierDependency extends HarmonyImportDependency {
 							this.allStarExports
 								? this.allStarExports.dependencies
 								: [
-										.../** @type {Iterable<HarmonyExportImportedSpecifierDependency>} */
+										.../** @type {ReadonlyArray<HarmonyExportImportedSpecifierDependency>} */
 										(this.otherStarExports),
 										this
 									]
@@ -1011,6 +1021,7 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 				mode,
 				templateContext.module,
 				moduleGraph,
+				templateContext.chunkGraph,
 				runtime,
 				templateContext.runtimeTemplate,
 				templateContext.runtimeRequirements
@@ -1024,6 +1035,7 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 	 * @param {ExportMode} mode the export mode
 	 * @param {Module} module the current module
 	 * @param {ModuleGraph} moduleGraph the module graph
+	 * @param {ChunkGraph} chunkGraph the chunk graph
 	 * @param {RuntimeSpec} runtime the runtime
 	 * @param {RuntimeTemplate} runtimeTemplate the runtime template
 	 * @param {RuntimeRequirements} runtimeRequirements runtime requirements
@@ -1035,6 +1047,7 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 		mode,
 		module,
 		moduleGraph,
+		chunkGraph,
 		runtime,
 		runtimeTemplate,
 		runtimeRequirements
@@ -1042,6 +1055,29 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 		const importedModule = /** @type {Module} */ (moduleGraph.getModule(dep));
 		const importVar = dep.getImportVar(moduleGraph);
 
+		if (
+			(mode.type === "reexport-namespace-object" ||
+				mode.type === "reexport-fake-namespace-object") &&
+			dep.defer &&
+			!moduleGraph.isAsync(importedModule)
+		) {
+			initFragments.push(
+				...this.getReexportDeferredNamespaceObjectFragments(
+					importedModule,
+					chunkGraph,
+					moduleGraph
+						.getExportsInfo(module)
+						.getUsedName(mode.name ? mode.name : [], runtime),
+					importVar,
+					importedModule.getExportsType(
+						moduleGraph,
+						module.buildMeta && module.buildMeta.strictHarmonyModule
+					),
+					runtimeRequirements
+				)
+			);
+			return;
+		}
 		switch (mode.type) {
 			case "missing":
 			case "empty-star":
@@ -1210,9 +1246,9 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 				// Filter out exports which are defined by other exports
 				// and filter out default export because it cannot be reexported with *
 				if (ignored.size > 1) {
-					content += `if(${JSON.stringify(
-						Array.from(ignored)
-					)}.indexOf(__WEBPACK_IMPORT_KEY__) < 0) `;
+					content += `if(${JSON.stringify([
+						...ignored
+					])}.indexOf(__WEBPACK_IMPORT_KEY__) < 0) `;
 				} else if (ignored.size === 1) {
 					content += `if(__WEBPACK_IMPORT_KEY__ !== ${JSON.stringify(
 						first(ignored)
@@ -1311,6 +1347,46 @@ HarmonyExportImportedSpecifierDependency.Template = class HarmonyExportImportedS
 		];
 	}
 
+	/**
+	 * @param {Module} module module
+	 * @param {ChunkGraph} chunkGraph chunkGraph
+	 * @param {string | false | string[]} key key
+	 * @param {string} name name
+	 * @param {import("../Module").ExportsType} exportsType exportsType
+	 * @param {Set<string>} runtimeRequirements runtimeRequirements
+	 * @returns {InitFragment<GenerateContext>[]} fragments
+	 */
+	getReexportDeferredNamespaceObjectFragments(
+		module,
+		chunkGraph,
+		key,
+		name,
+		exportsType,
+		runtimeRequirements
+	) {
+		runtimeRequirements.add(RuntimeGlobals.exports);
+		runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
+		runtimeRequirements.add(RuntimeGlobals.makeDeferredNamespaceObject);
+
+		const map = new Map();
+		const moduleId = JSON.stringify(chunkGraph.getModuleId(module));
+		const mode = getMakeDeferredNamespaceModeFromExportsType(exportsType);
+		map.set(
+			key,
+			`/* reexport deferred namespace object */ ${name}_deferred_namespace_cache || (${name}_deferred_namespace_cache = ${RuntimeGlobals.makeDeferredNamespaceObject}(${moduleId}, ${mode}))`
+		);
+
+		return [
+			new InitFragment(
+				`var ${name}_deferred_namespace_cache;\n`,
+				InitFragment.STAGE_CONSTANTS,
+				-1,
+				`${name}_deferred_namespace_cache`
+			),
+			new HarmonyExportInitFragment(module.exportsArgument, map)
+		];
+	}
+
 	/**
 	 * @param {Module} module module
 	 * @param {string} key key
@@ -1383,7 +1459,7 @@ class HarmonyStarExportsList {
 	}
 
 	slice() {
-		return this.dependencies.slice();
+		return [...this.dependencies];
 	}
 
 	/**

package/lib/dependencies/HarmonyExportInitFragment.js

@@ -154,7 +154,7 @@ class HarmonyExportInitFragment extends InitFragment {
 					? `/* unused harmony export ${first(this.unusedExports)} */\n`
 					: "";
 		const definitions = [];
-		const orderedExportMap = Array.from(this.exportMap).sort(([a], [b]) =>
+		const orderedExportMap = [...this.exportMap].sort(([a], [b]) =>
 			a < b ? -1 : 1
 		);
 		for (const [key, value] of orderedExportMap) {

package/lib/dependencies/HarmonyImportDependency.js

@@ -92,15 +92,19 @@ class HarmonyImportDependency extends ModuleDependency {
 	getImportVar(moduleGraph) {
 		const module = /** @type {Module} */ (moduleGraph.getParentModule(this));
 		const meta = moduleGraph.getMeta(module);
-		let importVarMap = meta.importVarMap;
-		if (!importVarMap) meta.importVarMap = importVarMap = new Map();
+		const defer = this.defer;
+
+		const metaKey = defer ? "deferredImportVarMap" : "importVarMap";
+		let importVarMap = meta[metaKey];
+		if (!importVarMap) meta[metaKey] = importVarMap = new Map();
+
 		let importVar = importVarMap.get(
 			/** @type {Module} */ (moduleGraph.getModule(this))
 		);
 		if (importVar) return importVar;
 		importVar = `${Template.toIdentifier(
 			`${this.userRequest}`
-		)}__WEBPACK_IMPORTED_MODULE_${importVarMap.size}__`;
+		)}__WEBPACK_${this.defer ? "DEFERRED_" : ""}IMPORTED_MODULE_${importVarMap.size}__`;
 		importVarMap.set(
 			/** @type {Module} */ (moduleGraph.getModule(this)),
 			importVar
@@ -120,11 +124,13 @@ class HarmonyImportDependency extends ModuleDependency {
 		return runtimeTemplate.importStatement({
 			update,
 			module: /** @type {Module} */ (moduleGraph.getModule(this)),
+			moduleGraph,
 			chunkGraph,
 			importVar: this.getImportVar(moduleGraph),
 			request: this.request,
 			originModule: module,
-			runtimeRequirements
+			runtimeRequirements,
+			defer: this.defer
 		});
 	}
 
@@ -299,7 +305,7 @@ HarmonyImportDependency.Template = class HarmonyImportDependencyTemplate extends
 		const moduleKey = referencedModule
 			? referencedModule.identifier()
 			: dep.request;
-		const key = `harmony import ${moduleKey}`;
+		const key = `${dep.defer ? "deferred " : ""}harmony import ${moduleKey}`;
 
 		const runtimeCondition = dep.weak
 			? false