webpack 5.61.0 → 5.63.0

package/lib/Chunk.js

@@ -63,8 +63,9 @@ let debugId = 1000;
 class Chunk {
 	/**
 	 * @param {string=} name of chunk being created, is optional (for subclasses)
+	 * @param {boolean} backCompat enable backward-compatibility
 	 */
-	constructor(name) {
+	constructor(name, backCompat = true) {
 		/** @type {number | string | null} */
 		this.id = null;
 		/** @type {(number|string)[] | null} */
@@ -84,7 +85,7 @@ class Chunk {
 		/** @type {RuntimeSpec} */
 		this.runtime = undefined;
 		/** @type {Set<string>} */
-		this.files = new ChunkFilesSet();
+		this.files = backCompat ? new ChunkFilesSet() : new Set();
 		/** @type {Set<string>} */
 		this.auxiliaryFiles = new Set();
 		/** @type {boolean} */

package/lib/Compilation.js

@@ -429,6 +429,8 @@ class Compilation {
 	 * @param {CompilationParams} params the compilation parameters
 	 */
 	constructor(compiler, params) {
+		this._backCompat = compiler._backCompat;
+
 		const getNormalModuleLoader = () => deprecatedNormalModuleLoaderHook(this);
 		/** @typedef {{ additionalAssets?: true | Function }} ProcessAssetsAdditionalOptions */
 		/** @type {AsyncSeriesHook<[CompilationAssets], ProcessAssetsAdditionalOptions>} */
@@ -559,6 +561,7 @@ class Compilation {
 		 * @returns {FakeHook<Pick<AsyncSeriesHook<T>, "tap" | "tapAsync" | "tapPromise" | "name">>} fake hook which redirects
 		 */
 		const createProcessAssetsHook = (name, stage, getArgs, code) => {
+			if (!this._backCompat && code) return undefined;
 			const errorMessage =
 				reason => `Can't automatically convert plugin using Compilation.hooks.${name} to Compilation.hooks.processAssets because ${reason}.
 BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a single Compilation.hooks.processAssets hook.`;
@@ -983,7 +986,6 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		this.asyncEntrypoints = [];
 		/** @type {Set<Chunk>} */
 		this.chunks = new Set();
-		arrayToSetDeprecation(this.chunks, "Compilation.chunks");
 		/** @type {ChunkGroup[]} */
 		this.chunkGroups = [];
 		/** @type {Map<string, ChunkGroup>} */
@@ -992,7 +994,10 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		this.namedChunks = new Map();
 		/** @type {Set<Module>} */
 		this.modules = new Set();
-		arrayToSetDeprecation(this.modules, "Compilation.modules");
+		if (this._backCompat) {
+			arrayToSetDeprecation(this.chunks, "Compilation.chunks");
+			arrayToSetDeprecation(this.modules, "Compilation.modules");
+		}
 		/** @private @type {Map<string, Module>} */
 		this._modules = new Map();
 		this.records = null;
@@ -1286,7 +1291,8 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 			}
 			this._modules.set(identifier, module);
 			this.modules.add(module);
-			ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
+			if (this._backCompat)
+				ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
 			if (currentProfile !== undefined) {
 				currentProfile.markIntegrationEnd();
 			}
@@ -1701,7 +1707,8 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 
 		this._modules.set(module.identifier(), module);
 		this.modules.add(module);
-		ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
+		if (this._backCompat)
+			ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
 
 		this._handleModuleBuildAndDependencies(
 			originModule,
@@ -2417,9 +2424,10 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		let statNew = 0;
 		/**
 		 * @param {Module} module module
-		 * @returns {{ modules?: Map<Module, string | number | undefined>, blocks?: (string | number)[] }} references
+		 * @returns {{ id: string | number, modules?: Map<Module, string | number | undefined>, blocks?: (string | number)[] }} references
 		 */
 		const computeReferences = module => {
+			const id = chunkGraph.getModuleId(module);
 			/** @type {Map<Module, string | number | undefined>} */
 			let modules = undefined;
 			/** @type {(string | number)[] | undefined} */
@@ -2447,16 +2455,18 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 					queue.push.apply(queue, block.blocks);
 				}
 			}
-			return { modules, blocks };
+			return { id, modules, blocks };
 		};
 		/**
 		 * @param {Module} module module
 		 * @param {Object} references references
+		 * @param {string | number} references.id id
 		 * @param {Map<Module, string | number>=} references.modules modules
 		 * @param {(string | number)[]=} references.blocks blocks
 		 * @returns {boolean} ok?
 		 */
-		const compareReferences = (module, { modules, blocks }) => {
+		const compareReferences = (module, { id, modules, blocks }) => {
+			if (id !== chunkGraph.getModuleId(module)) return false;
 			if (modules !== undefined) {
 				for (const [module, id] of modules) {
 					if (chunkGraph.getModuleId(module) !== id) return false;
@@ -2482,7 +2492,7 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		};
 
 		for (const [module, memCache] of moduleMemCaches) {
-			/** @type {{ references: { modules?: Map<Module, string | number | undefined>, blocks?: (string | number)[]}, memCache: WeakTupleMap<any[], any> }} */
+			/** @type {{ references: { id: string | number, modules?: Map<Module, string | number | undefined>, blocks?: (string | number)[]}, memCache: WeakTupleMap<any[], any> }} */
 			const cache = memCache.get(key);
 			if (cache === undefined) {
 				const memCache2 = new WeakTupleMap();
@@ -2777,8 +2787,10 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		);
 		this.chunkGraph = chunkGraph;
 
-		for (const module of this.modules) {
-			ChunkGraph.setChunkGraphForModule(module, chunkGraph);
+		if (this._backCompat) {
+			for (const module of this.modules) {
+				ChunkGraph.setChunkGraphForModule(module, chunkGraph);
+			}
 		}
 
 		this.hooks.seal.call();
@@ -3045,14 +3057,16 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 									}
 									this.hooks.afterProcessAssets.call(this.assets);
 									this.logger.timeEnd("process assets");
-									this.assets = soonFrozenObjectDeprecation(
-										this.assets,
-										"Compilation.assets",
-										"DEP_WEBPACK_COMPILATION_ASSETS",
-										`BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
+									this.assets = this._backCompat
+										? soonFrozenObjectDeprecation(
+												this.assets,
+												"Compilation.assets",
+												"DEP_WEBPACK_COMPILATION_ASSETS",
+												`BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
 	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
 	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.`
-									);
+										  )
+										: Object.freeze(this.assets);
 
 									this.summarizeDependencies();
 									if (shouldRecord) {
@@ -3453,7 +3467,8 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 	 */
 	addRuntimeModule(chunk, module, chunkGraph = this.chunkGraph) {
 		// Deprecated ModuleGraph association
-		ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
+		if (this._backCompat)
+			ModuleGraph.setModuleGraphForModule(module, this.moduleGraph);
 
 		// add it to the list
 		this.modules.add(module);
@@ -3589,9 +3604,10 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 				return chunk;
 			}
 		}
-		const chunk = new Chunk(name);
+		const chunk = new Chunk(name, this._backCompat);
 		this.chunks.add(chunk);
-		ChunkGraph.setChunkGraphForChunk(chunk, this.chunkGraph);
+		if (this._backCompat)
+			ChunkGraph.setChunkGraphForChunk(chunk, this.chunkGraph);
 		if (name) {
 			this.namedChunks.set(name, chunk);
 		}
@@ -4715,7 +4731,7 @@ This prevents using hashes of each other and should be avoided.`);
 					this.outputOptions;
 				const runtimeTemplate = this.runtimeTemplate;
 
-				const chunk = new Chunk("build time chunk");
+				const chunk = new Chunk("build time chunk", this._backCompat);
 				chunk.id = chunk.name;
 				chunk.ids = [chunk.id];
 				chunk.runtime = runtime;

package/lib/Compiler.js

@@ -119,8 +119,9 @@ const includesHash = (filename, hashes) => {
 class Compiler {
 	/**
 	 * @param {string} context the compilation path
+	 * @param {WebpackOptions} options options
 	 */
-	constructor(context) {
+	constructor(context, options = /** @type {WebpackOptions} */ ({})) {
 		this.hooks = Object.freeze({
 			/** @type {SyncHook<[]>} */
 			initialize: new SyncHook([]),
@@ -240,8 +241,7 @@ class Compiler {
 
 		this.infrastructureLogger = undefined;
 
-		/** @type {WebpackOptions} */
-		this.options = /** @type {WebpackOptions} */ ({});
+		this.options = options;
 
 		this.context = context;
 
@@ -263,6 +263,8 @@ class Compiler {
 		/** @type {boolean} */
 		this.watchMode = false;
 
+		this._backCompat = this.options.experiments.backCompat !== false;
+
 		/** @type {Compilation} */
 		this._lastCompilation = undefined;
 		/** @type {NormalModuleFactory} */
@@ -963,7 +965,13 @@ ${other}`);
 		outputOptions,
 		plugins
 	) {
-		const childCompiler = new Compiler(this.context);
+		const childCompiler = new Compiler(this.context, {
+			...this.options,
+			output: {
+				...this.options.output,
+				...outputOptions
+			}
+		});
 		childCompiler.name = compilerName;
 		childCompiler.outputPath = this.outputPath;
 		childCompiler.inputFileSystem = this.inputFileSystem;
@@ -976,6 +984,7 @@ ${other}`);
 		childCompiler.fsStartTime = this.fsStartTime;
 		childCompiler.cache = this.cache;
 		childCompiler.compilerPath = `${this.compilerPath}${compilerName}|${compilerIndex}|`;
+		childCompiler._backCompat = this._backCompat;
 
 		const relativeCompilerName = makePathsRelative(
 			this.context,
@@ -991,13 +1000,6 @@ ${other}`);
 			this.records[relativeCompilerName].push((childCompiler.records = {}));
 		}
 
-		childCompiler.options = {
-			...this.options,
-			output: {
-				...this.options.output,
-				...outputOptions
-			}
-		};
 		childCompiler.parentCompilation = compilation;
 		childCompiler.root = this.root;
 		if (Array.isArray(plugins)) {

package/lib/FileSystemInfo.js

@@ -692,6 +692,11 @@ class SnapshotOptimization {
 	}
 }
 
+const parseString = str => {
+	if (str[0] === "'") str = `"${str.slice(1, -1).replace(/"/g, '\\"')}"`;
+	return JSON.parse(str);
+};
+
 /* istanbul ignore next */
 /**
  * @param {number} mtime mtime
@@ -1657,17 +1662,13 @@ class FileSystemInfo {
 												let dependency;
 												if (imp.d === -1) {
 													// import ... from "..."
-													dependency = JSON.parse(
+													dependency = parseString(
 														source.substring(imp.s - 1, imp.e + 1)
 													);
 												} else if (imp.d > -1) {
 													// import()
 													let expr = source.substring(imp.s, imp.e).trim();
-													if (expr[0] === "'")
-														expr = `"${expr
-															.slice(1, -1)
-															.replace(/"/g, '\\"')}"`;
-													dependency = JSON.parse(expr);
+													dependency = parseString(expr);
 												} else {
 													// e.g. import.meta
 													continue;

package/lib/HotModuleReplacementPlugin.js

@@ -83,6 +83,7 @@ class HotModuleReplacementPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		const { _backCompat: backCompat } = compiler;
 		if (compiler.options.output.strictModuleErrorHandling === undefined)
 			compiler.options.output.strictModuleErrorHandling = true;
 		const runtimeRequirements = [RuntimeGlobals.module];
@@ -597,7 +598,8 @@ class HotModuleReplacementPlugin {
 								(newRuntimeModules && newRuntimeModules.length > 0)
 							) {
 								const hotUpdateChunk = new HotUpdateChunk();
-								ChunkGraph.setChunkGraphForChunk(hotUpdateChunk, chunkGraph);
+								if (backCompat)
+									ChunkGraph.setChunkGraphForChunk(hotUpdateChunk, chunkGraph);
 								hotUpdateChunk.id = chunkId;
 								hotUpdateChunk.runtime = newRuntime;
 								if (currentChunk) {

package/lib/RuntimePlugin.js

@@ -218,7 +218,15 @@ class RuntimePlugin {
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.systemContext)
 				.tap("RuntimePlugin", chunk => {
-					if (compilation.outputOptions.library.type === "system") {
+					const { outputOptions } = compilation;
+					const { library: globalLibrary } = outputOptions;
+					const entryOptions = chunk.getEntryOptions();
+					const libraryType =
+						entryOptions && entryOptions.library !== undefined
+							? entryOptions.library.type
+							: globalLibrary.type;
+
+					if (libraryType === "system") {
 						compilation.addRuntimeModule(
 							chunk,
 							new SystemContextRuntimeModule()

package/lib/buildChunkGraph.js

@@ -50,6 +50,7 @@ const { getEntryRuntime, mergeRuntime } = require("./util/runtime");
  * @property {Set<ChunkGroupInfo>} availableChildren set of chunk groups which depend on the this chunk group as availableSource
  * @property {number} preOrderIndex next pre order index
  * @property {number} postOrderIndex next post order index
+ * @property {boolean} asyncChunkLoading create async chunks
  */
 
 /**
@@ -304,7 +305,11 @@ const visitModules = (
 			availableSources: undefined,
 			availableChildren: undefined,
 			preOrderIndex: 0,
-			postOrderIndex: 0
+			postOrderIndex: 0,
+			asyncChunkLoading:
+				chunkGroup.options.chunkLoading === false
+					? false
+					: compilation.outputOptions.chunkLoading !== false
 		};
 		chunkGroup.index = nextChunkGroupIndex++;
 		if (chunkGroup.getNumberOfParents() > 0) {
@@ -418,7 +423,11 @@ const visitModules = (
 						availableSources: undefined,
 						availableChildren: undefined,
 						preOrderIndex: 0,
-						postOrderIndex: 0
+						postOrderIndex: 0,
+						asyncChunkLoading:
+							entryOptions.chunkLoading !== undefined
+								? entryOptions.chunkLoading !== false
+								: chunkGroupInfo.asyncChunkLoading
 					};
 					chunkGroupInfoMap.set(entrypoint, cgi);
 
@@ -442,8 +451,18 @@ const visitModules = (
 					chunkGroup: entrypoint,
 					chunkGroupInfo: cgi
 				});
+			} else if (!chunkGroupInfo.asyncChunkLoading) {
+				// Just queue the block into the current chunk group
+				queue.push({
+					action: PROCESS_BLOCK,
+					block: b,
+					module: module,
+					chunk,
+					chunkGroup,
+					chunkGroupInfo
+				});
 			} else {
-				cgi = namedChunkGroups.get(chunkName);
+				cgi = chunkName && namedChunkGroups.get(chunkName);
 				if (!cgi) {
 					c = compilation.addChunkInGroup(
 						b.groupOptions || b.chunkName,
@@ -464,7 +483,8 @@ const visitModules = (
 						availableSources: undefined,
 						availableChildren: undefined,
 						preOrderIndex: 0,
-						postOrderIndex: 0
+						postOrderIndex: 0,
+						asyncChunkLoading: chunkGroupInfo.asyncChunkLoading
 					};
 					allCreatedChunkGroups.add(c);
 					chunkGroupInfoMap.set(c, cgi);
@@ -518,7 +538,7 @@ const visitModules = (
 				chunkGroup: c,
 				chunkGroupInfo: cgi
 			});
-		} else {
+		} else if (entrypoint !== undefined) {
 			chunkGroupInfo.chunkGroup.addAsyncEntrypoint(entrypoint);
 		}
 	};

package/lib/cache/PackFileCacheStrategy.js

@@ -782,7 +782,7 @@ class PackContent {
 			this.logger.time(timeMessage);
 		}
 		const value = this.lazy();
-		if (value instanceof Promise) {
+		if ("then" in value) {
 			return value.then(data => {
 				const map = data.map;
 				if (timeMessage) {
@@ -830,7 +830,7 @@ class PackContent {
 				this.logger.time(timeMessage);
 			}
 			const value = this.lazy();
-			if (value instanceof Promise) {
+			if ("then" in value) {
 				return value.then(data => {
 					if (timeMessage) {
 						this.logger.timeEnd(timeMessage);
@@ -918,7 +918,7 @@ class PackContent {
 		}
 		const value = this.lazy();
 		this.outdated = false;
-		if (value instanceof Promise) {
+		if ("then" in value) {
 			// Move to state B1
 			this.lazy = write(() =>
 				value.then(data => {

package/lib/config/defaults.js

@@ -183,7 +183,8 @@ const applyWebpackOptionsDefaults = options => {
 	applyModuleDefaults(options.module, {
 		cache,
 		syncWebAssembly: options.experiments.syncWebAssembly,
-		asyncWebAssembly: options.experiments.asyncWebAssembly
+		asyncWebAssembly: options.experiments.asyncWebAssembly,
+		futureDefaults
 	});
 
 	applyOutputDefaults(options.output, {
@@ -265,15 +266,15 @@ const applyWebpackOptionsDefaults = options => {
  * @returns {void}
  */
 const applyExperimentsDefaults = (experiments, { production, development }) => {
-	D(experiments, "topLevelAwait", false);
+	D(experiments, "futureDefaults", false);
+	D(experiments, "backCompat", !experiments.futureDefaults);
+	D(experiments, "topLevelAwait", experiments.futureDefaults);
 	D(experiments, "syncWebAssembly", false);
-	D(experiments, "asyncWebAssembly", false);
+	D(experiments, "asyncWebAssembly", experiments.futureDefaults);
 	D(experiments, "outputModule", false);
-	D(experiments, "asset", false);
 	D(experiments, "layers", false);
 	D(experiments, "lazyCompilation", undefined);
 	D(experiments, "buildHttp", undefined);
-	D(experiments, "futureDefaults", false);
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
 
 	if (typeof experiments.buildHttp === "object") {
@@ -428,9 +429,14 @@ const applySnapshotDefaults = (snapshot, { production, futureDefaults }) => {
 
 /**
  * @param {JavascriptParserOptions} parserOptions parser options
+ * @param {Object} options options
+ * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
-const applyJavascriptParserOptionsDefaults = parserOptions => {
+const applyJavascriptParserOptionsDefaults = (
+	parserOptions,
+	{ futureDefaults }
+) => {
 	D(parserOptions, "unknownContextRequest", ".");
 	D(parserOptions, "unknownContextRegExp", false);
 	D(parserOptions, "unknownContextRecursive", true);
@@ -442,9 +448,8 @@ const applyJavascriptParserOptionsDefaults = parserOptions => {
 	D(parserOptions, "wrappedContextRegExp", /.*/);
 	D(parserOptions, "wrappedContextRecursive", true);
 	D(parserOptions, "wrappedContextCritical", false);
-
-	D(parserOptions, "strictExportPresence", false);
 	D(parserOptions, "strictThisContextOnImports", false);
+	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
 
 /**
@@ -453,11 +458,12 @@ const applyJavascriptParserOptionsDefaults = parserOptions => {
  * @param {boolean} options.cache is caching enabled
  * @param {boolean} options.syncWebAssembly is syncWebAssembly enabled
  * @param {boolean} options.asyncWebAssembly is asyncWebAssembly enabled
+ * @param {boolean} options.futureDefaults is future defaults enabled
  * @returns {void}
  */
 const applyModuleDefaults = (
 	module,
-	{ cache, syncWebAssembly, asyncWebAssembly }
+	{ cache, syncWebAssembly, asyncWebAssembly, futureDefaults }
 ) => {
 	if (cache) {
 		D(module, "unsafeCache", module => {
@@ -475,7 +481,9 @@ const applyModuleDefaults = (
 	}
 
 	F(module.parser, "javascript", () => ({}));
-	applyJavascriptParserOptionsDefaults(module.parser.javascript);
+	applyJavascriptParserOptionsDefaults(module.parser.javascript, {
+		futureDefaults
+	});
 
 	A(module, "defaultRules", () => {
 		const esm = {

package/lib/config/normalization.js

@@ -229,6 +229,7 @@ const getNormalizedWebpackOptions = config => {
 					wrappedContextRegExp: module.wrappedContextRegExp,
 					wrappedContextRecursive: module.wrappedContextRecursive,
 					wrappedContextCritical: module.wrappedContextCritical,
+					// TODO webpack 6 remove
 					strictExportPresence: module.strictExportPresence,
 					strictThisContextOnImports: module.strictThisContextOnImports,
 					...parserOptions

package/lib/dependencies/AMDRequireDependency.js

@@ -90,7 +90,7 @@ AMDRequireDependency.Template = class AMDRequireDependencyTemplate extends (
 		// has array range but no function range
 		if (dep.arrayRange && !dep.functionRange) {
 			const startBlock = `${promise}.then(function() {`;
-			const endBlock = `;}).catch(${RuntimeGlobals.uncaughtErrorHandler})`;
+			const endBlock = `;})['catch'](${RuntimeGlobals.uncaughtErrorHandler})`;
 			runtimeRequirements.add(RuntimeGlobals.uncaughtErrorHandler);
 
 			source.replace(dep.outerRange[0], dep.arrayRange[0] - 1, startBlock);
@@ -103,7 +103,7 @@ AMDRequireDependency.Template = class AMDRequireDependencyTemplate extends (
 		// has function range but no array range
 		if (dep.functionRange && !dep.arrayRange) {
 			const startBlock = `${promise}.then((`;
-			const endBlock = `).bind(exports, __webpack_require__, exports, module)).catch(${RuntimeGlobals.uncaughtErrorHandler})`;
+			const endBlock = `).bind(exports, __webpack_require__, exports, module))['catch'](${RuntimeGlobals.uncaughtErrorHandler})`;
 			runtimeRequirements.add(RuntimeGlobals.uncaughtErrorHandler);
 
 			source.replace(dep.outerRange[0], dep.functionRange[0] - 1, startBlock);
@@ -118,7 +118,7 @@ AMDRequireDependency.Template = class AMDRequireDependencyTemplate extends (
 			const startBlock = `${promise}.then(function() { `;
 			const errorRangeBlock = `}${
 				dep.functionBindThis ? ".bind(this)" : ""
-			}).catch(`;
+			})['catch'](`;
 			const endBlock = `${dep.errorCallbackBindThis ? ".bind(this)" : ""})`;
 
 			source.replace(dep.outerRange[0], dep.arrayRange[0] - 1, startBlock);
@@ -150,9 +150,9 @@ AMDRequireDependency.Template = class AMDRequireDependencyTemplate extends (
 		// has array range, function range, but no errorCallbackRange
 		if (dep.arrayRange && dep.functionRange) {
 			const startBlock = `${promise}.then(function() { `;
-			const endBlock = `}${dep.functionBindThis ? ".bind(this)" : ""}).catch(${
-				RuntimeGlobals.uncaughtErrorHandler
-			})`;
+			const endBlock = `}${
+				dep.functionBindThis ? ".bind(this)" : ""
+			})['catch'](${RuntimeGlobals.uncaughtErrorHandler})`;
 			runtimeRequirements.add(RuntimeGlobals.uncaughtErrorHandler);
 
 			source.replace(dep.outerRange[0], dep.arrayRange[0] - 1, startBlock);

package/lib/dependencies/CommonJsFullRequireDependency.js

@@ -117,7 +117,11 @@ CommonJsFullRequireDependency.Template = class CommonJsFullRequireDependencyTemp
 				const comment = equals(usedImported, ids)
 					? ""
 					: Template.toNormalComment(propertyAccess(ids)) + " ";
-				requireExpr += `${comment}${propertyAccess(usedImported)}`;
+				const access = `${comment}${propertyAccess(usedImported)}`;
+				requireExpr =
+					dep.asiSafe === true
+						? `(${requireExpr}${access})`
+						: `${requireExpr}${access}`;
 			}
 		}
 		source.replace(dep.range[0], dep.range[1] - 1, requireExpr);

package/lib/dependencies/CommonJsImportsParserPlugin.js

@@ -141,7 +141,9 @@ class CommonJsImportsParserPlugin {
 						regExp: options.unknownContextRegExp,
 						mode: "sync"
 					},
-					expr.range
+					expr.range,
+					undefined,
+					parser.scope.inShorthand
 				);
 				dep.critical =
 					options.unknownContextCritical &&

package/lib/dependencies/CommonJsRequireContextDependency.js

@@ -10,11 +10,13 @@ const ContextDependency = require("./ContextDependency");
 const ContextDependencyTemplateAsRequireCall = require("./ContextDependencyTemplateAsRequireCall");
 
 class CommonJsRequireContextDependency extends ContextDependency {
-	constructor(options, range, valueRange) {
+	constructor(options, range, valueRange, inShorthand) {
 		super(options);
 
 		this.range = range;
 		this.valueRange = valueRange;
+		// inShorthand must be serialized by subclasses that use it
+		this.inShorthand = inShorthand;
 	}
 
 	get type() {
@@ -26,6 +28,7 @@ class CommonJsRequireContextDependency extends ContextDependency {
 
 		write(this.range);
 		write(this.valueRange);
+		write(this.inShorthand);
 
 		super.serialize(context);
 	}
@@ -35,6 +38,7 @@ class CommonJsRequireContextDependency extends ContextDependency {
 
 		this.range = read();
 		this.valueRange = read();
+		this.inShorthand = read();
 
 		super.deserialize(context);
 	}

package/lib/dependencies/ContextDependency.js

@@ -47,6 +47,7 @@ class ContextDependency extends Dependency {
 		this.request = undefined;
 		this.range = undefined;
 		this.valueRange = undefined;
+		this.inShorthand = undefined;
 		// TODO refactor this
 		this.replaces = undefined;
 	}

package/lib/dependencies/ContextDependencyTemplateAsRequireCall.js

@@ -24,13 +24,16 @@ class ContextDependencyTemplateAsRequireCall extends ContextDependency.Template
 		{ runtimeTemplate, moduleGraph, chunkGraph, runtimeRequirements }
 	) {
 		const dep = /** @type {ContextDependency} */ (dependency);
-		const moduleExports = runtimeTemplate.moduleExports({
+		let moduleExports = runtimeTemplate.moduleExports({
 			module: moduleGraph.getModule(dep),
 			chunkGraph,
 			request: dep.request,
 			runtimeRequirements
 		});
 
+		if (dep.inShorthand) {
+			moduleExports = `${dep.inShorthand}: ${moduleExports}`;
+		}
 		if (moduleGraph.getModule(dep)) {
 			if (dep.valueRange) {
 				if (Array.isArray(dep.replaces)) {