fix: trampoline getSideEffectsConnectionState to avoid stack overflow on deep import chains (#20993)

alexander-akait · web-flow · commit c8d97e23732f · 2026-05-20T23:15:20.000+03:00
diff --git a/.changeset/deep-side-effect-chain-stack-overflow.md b/.changeset/deep-side-effect-chain-stack-overflow.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Fix `RangeError: Maximum call stack size exceeded` thrown from `HarmonyImportSideEffectDependency.getModuleEvaluationSideEffectsState` on long linear chains of side-effect-free imports. `NormalModule.getSideEffectsConnectionState` previously descended through `HarmonyImportSideEffectDependency.getModuleEvaluationSideEffectsState` recursively, adding two stack frames per module, which overflowed V8's stack at a few thousand modules deep. The traversal is now iterative.
diff --git a/lib/NormalModule.js b/lib/NormalModule.js
@@ -61,6 +61,7 @@ const parseJson = require("./util/parseJson");
 /** @typedef {import("../declarations/WebpackOptions").ResolveOptions} ResolveOptions */
 /** @typedef {import("../declarations/WebpackOptions").NoParse} NoParse */
 /** @typedef {import("./config/defaults").WebpackOptionsNormalizedWithDefaults} WebpackOptions */
+/** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Dependency").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("./Generator")} Generator */
 /** @typedef {import("./Generator").GenerateErrorFn} GenerateErrorFn */
@@ -85,6 +86,7 @@ const parseJson = require("./util/parseJson");
 /** @typedef {import("./Module").UnsafeCacheData} UnsafeCacheData */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./ModuleGraphConnection").ConnectionState} ConnectionState */
+/** @typedef {Iterator<SideEffectsWalk, ConnectionState, ConnectionState>} SideEffectsWalk */
 /** @typedef {import("./NormalModuleFactory")} NormalModuleFactory */
 /** @typedef {import("./NormalModuleFactory").NormalModuleTypes} NormalModuleTypes */
 /** @typedef {import("./NormalModuleFactory").ResourceSchemeData} ResourceSchemeData */
@@ -126,6 +128,87 @@ const getExtractSourceMap = memoize(() => require("./util/extractSourceMap"));
 
 const getValidate = memoize(() => require("schema-utils").validate);
 
+const getHarmonyImportSideEffectDependency = memoize(() =>
+	require("./dependencies/HarmonyImportSideEffectDependency")
+);
+
+/**
+ * @param {NormalModule} mod the module
+ * @param {ModuleGraph} moduleGraph the module graph
+ * @param {Dependency} dep the dep that triggered the bailout
+ */
+const recordSideEffectsBailout = (mod, moduleGraph, dep) => {
+	if (mod._addedSideEffectsBailout === undefined) {
+		mod._addedSideEffectsBailout = new WeakSet();
+	} else if (mod._addedSideEffectsBailout.has(moduleGraph)) {
+		return;
+	}
+	mod._addedSideEffectsBailout.add(moduleGraph);
+	moduleGraph
+		.getOptimizationBailout(mod)
+		.push(
+			() =>
+				`Dependency (${dep.type}) with side effects at ${formatLocation(dep.loc)}`
+		);
+};
+
+/**
+ * Generator form of `getSideEffectsConnectionState` — descends through
+ * `HarmonyImportSideEffectDependency` via `yield` so the trampoline in
+ * `getSideEffectsConnectionState` can drive the walk iteratively (#20986).
+ * @param {NormalModule} mod the module being evaluated
+ * @param {ModuleGraph} moduleGraph the module graph
+ * @returns {SideEffectsWalk} the generator
+ */
+function* walkSideEffects(mod, moduleGraph) {
+	if (mod.factoryMeta !== undefined) {
+		if (mod.factoryMeta.sideEffectFree) return false;
+		if (mod.factoryMeta.sideEffectFree === false) return true;
+	}
+	if (!(mod.buildMeta !== undefined && mod.buildMeta.sideEffectFree)) {
+		return true;
+	}
+	if (mod._isEvaluatingSideEffects) {
+		return ModuleGraphConnection.CIRCULAR_CONNECTION;
+	}
+
+	const SideEffectDep = getHarmonyImportSideEffectDependency();
+	mod._isEvaluatingSideEffects = true;
+	/** @type {ConnectionState} */
+	let current = false;
+
+	for (const dep of mod.dependencies) {
+		/** @type {ConnectionState} */
+		let state;
+		if (dep instanceof SideEffectDep) {
+			const refModule = moduleGraph.getModule(dep);
+			if (!refModule) {
+				state = true;
+			} else if (refModule instanceof NormalModule) {
+				state = yield walkSideEffects(refModule, moduleGraph);
+			} else {
+				state = refModule.getSideEffectsConnectionState(moduleGraph);
+			}
+		} else {
+			state = dep.getModuleEvaluationSideEffectsState(moduleGraph);
+		}
+
+		if (state === true) {
+			recordSideEffectsBailout(mod, moduleGraph, dep);
+			mod._isEvaluatingSideEffects = false;
+			return true;
+		}
+		if (state !== ModuleGraphConnection.CIRCULAR_CONNECTION) {
+			current = ModuleGraphConnection.addConnectionStates(current, state);
+		}
+	}
+
+	mod._isEvaluatingSideEffects = false;
+	// When caching is implemented here, make sure to not cache when
+	// at least one circular connection was folded into `current`.
+	return current;
+}
+
 const ABSOLUTE_PATH_REGEX = /^(?:[a-z]:\\|\\\\|\/)/i;
 
 /**
@@ -405,12 +488,10 @@ class NormalModule extends Module {
 		 */
 		this._forceBuild = true;
 		/**
-		 * @private
 		 * @type {boolean}
 		 */
 		this._isEvaluatingSideEffects = false;
 		/**
-		 * @private
 		 * @type {WeakSet<ModuleGraph> | undefined}
 		 */
 		this._addedSideEffectsBailout = undefined;
@@ -1453,47 +1534,21 @@ class NormalModule extends Module {
 	 * @returns {ConnectionState} how this module should be connected to referencing modules when consumed for side-effects only
 	 */
 	getSideEffectsConnectionState(moduleGraph) {
-		if (this.factoryMeta !== undefined) {
-			if (this.factoryMeta.sideEffectFree) return false;
-			if (this.factoryMeta.sideEffectFree === false) return true;
-		}
-		if (this.buildMeta !== undefined && this.buildMeta.sideEffectFree) {
-			if (this._isEvaluatingSideEffects) {
-				return ModuleGraphConnection.CIRCULAR_CONNECTION;
-			}
-			this._isEvaluatingSideEffects = true;
-			/** @type {ConnectionState} */
-			let current = false;
-			for (const dep of this.dependencies) {
-				const state = dep.getModuleEvaluationSideEffectsState(moduleGraph);
-				if (state === true) {
-					if (
-						this._addedSideEffectsBailout === undefined
-							? ((this._addedSideEffectsBailout = new WeakSet()), true)
-							: !this._addedSideEffectsBailout.has(moduleGraph)
-					) {
-						this._addedSideEffectsBailout.add(moduleGraph);
-						moduleGraph
-							.getOptimizationBailout(this)
-							.push(
-								() =>
-									`Dependency (${
-										dep.type
-									}) with side effects at ${formatLocation(dep.loc)}`
-							);
-					}
-					this._isEvaluatingSideEffects = false;
-					return true;
-				} else if (state !== ModuleGraphConnection.CIRCULAR_CONNECTION) {
-					current = ModuleGraphConnection.addConnectionStates(current, state);
-				}
+		// Trampoline `walkSideEffects` so the descent doesn't consume the
+		// call stack (#20986).
+		const stack = [walkSideEffects(this, moduleGraph)];
+		/** @type {ConnectionState} */
+		let r = false;
+		while (stack.length > 0) {
+			const step = stack[stack.length - 1].next(r);
+			if (step.done) {
+				stack.pop();
+				r = step.value;
+			} else {
+				stack.push(step.value);
 			}
-			this._isEvaluatingSideEffects = false;
-			// When caching is implemented here, make sure to not cache when
-			// at least one circular connection was in the loop above
-			return current;
 		}
-		return true;
+		return r;
 	}
 
 	/**
diff --git a/test/NormalModule.unittest.js b/test/NormalModule.unittest.js
@@ -4,6 +4,7 @@ const SourceMapSource = require("webpack-sources").SourceMapSource;
 const OriginalSource = require("webpack-sources").OriginalSource;
 const RawSource = require("webpack-sources").RawSource;
 const NormalModule = require("../lib/NormalModule");
+const HarmonyImportSideEffectDependency = require("../lib/dependencies/HarmonyImportSideEffectDependency");
 
 describe("NormalModule", () => {
 	let normalModule;
@@ -382,4 +383,90 @@ describe("NormalModule", () => {
 			});
 		});
 	});
+
+	describe("#getSideEffectsConnectionState", () => {
+		// Builds a synthetic linear chain of `count` side-effect-free modules
+		// linked by HarmonyImportSideEffectDependency. Walking the chain via
+		// the recursive form used 2 stack frames per module and overflowed on
+		// long chains (issue #20986).
+		const buildChain = (count) => {
+			const modules = [];
+			for (let i = 0; i < count; i++) {
+				const mod = new NormalModule({
+					type: "javascript/auto",
+					request: `/m${i}`,
+					userRequest: `/m${i}`,
+					rawRequest: `m${i}`,
+					loaders: [],
+					resource: `/m${i}`,
+					parser: { parse() {} },
+					generator: null,
+					resolveOptions: {}
+				});
+				mod.buildMeta = { sideEffectFree: true };
+				modules.push(mod);
+			}
+			const depToModule = new Map();
+			for (let i = 0; i < count - 1; i++) {
+				const dep = new HarmonyImportSideEffectDependency(
+					`m${i + 1}`,
+					0,
+					"evaluation"
+				);
+				modules[i].dependencies = [dep];
+				depToModule.set(dep, modules[i + 1]);
+			}
+			modules[count - 1].dependencies = [];
+			const moduleGraph = {
+				getModule: (dep) => depToModule.get(dep),
+				getOptimizationBailout: () => []
+			};
+			return { modules, moduleGraph };
+		};
+
+		it("handles deep linear chains without overflowing the stack", () => {
+			const { modules, moduleGraph } = buildChain(20000);
+			expect(modules[0].getSideEffectsConnectionState(moduleGraph)).toBe(false);
+		});
+
+		it("detects cycles in the side-effect graph", () => {
+			const { modules, moduleGraph } = buildChain(50);
+			// close the loop: last module's dep points to modules[0]
+			const lastDep = new HarmonyImportSideEffectDependency(
+				"m0",
+				0,
+				"evaluation"
+			);
+			modules[49].dependencies = [lastDep];
+			const originalGetModule = moduleGraph.getModule;
+			moduleGraph.getModule = (dep) =>
+				dep === lastDep ? modules[0] : originalGetModule(dep);
+			// Cycles fold to `false` (the accumulator's identity) when all
+			// participating modules are side-effect free — same as the original
+			// recursive behavior.
+			expect(modules[0].getSideEffectsConnectionState(moduleGraph)).toBe(false);
+			expect(modules[0]._isEvaluatingSideEffects).toBe(false);
+		});
+
+		it("reports the bailout dep when a chain member has side effects", () => {
+			const { modules, moduleGraph } = buildChain(10);
+			// Make module 5 have side effects.
+			modules[5].buildMeta = { sideEffectFree: false };
+			const bailouts = new Map();
+			moduleGraph.getOptimizationBailout = (mod) => {
+				if (!bailouts.has(mod)) bailouts.set(mod, []);
+				return bailouts.get(mod);
+			};
+			expect(modules[0].getSideEffectsConnectionState(moduleGraph)).toBe(true);
+			// Each ancestor in the chain (modules 0..4) records the bailout once
+			// for the dep that triggered descent, matching the recursive baseline.
+			for (let i = 0; i < 5; i++) {
+				const list = bailouts.get(modules[i]);
+				expect(list).toHaveLength(1);
+				expect(list[0]()).toMatch(
+					/Dependency \(harmony side effect evaluation\)/
+				);
+			}
+		});
+	});
 });
diff --git a/test/configCases/side-effects/deep-import-chain/.gitignore b/test/configCases/side-effects/deep-import-chain/.gitignore
@@ -0,0 +1 @@
+src/
diff --git a/test/configCases/side-effects/deep-import-chain/index.js b/test/configCases/side-effects/deep-import-chain/index.js
@@ -0,0 +1,7 @@
+import { value, config } from "./src/chain/mod-0.js";
+
+it("should compile a deep linear chain of side-effect-free imports without overflowing the stack", () => {
+	expect(config.id).toBe(0);
+	// value is a chain of nested arrays — innermost element is from the terminal module
+	expect(Array.isArray(value)).toBe(true);
+});
diff --git a/test/configCases/side-effects/deep-import-chain/webpack.config.js b/test/configCases/side-effects/deep-import-chain/webpack.config.js
@@ -0,0 +1,41 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+
+// Mirrors the reproduction from
+// https://github.com/abecirovic-mo/webpack-5.107.0-repro: a long chain of
+// side-effect-free modules where each imports the next and uses the
+// imported binding in its own export. The SideEffectsFlagPlugin walks the
+// chain via `HarmonyImportSideEffectDependency.getModuleEvaluationSideEffectsState`,
+// which used to recurse and overflow V8's stack on 5.107.0 (issue #20986).
+// The chain here is linear (mod-N is terminal) — that's enough to exercise
+// the same recursive path. The unit test in `test/NormalModule.unittest.js`
+// covers a 20000-deep chain to assert the algorithm is stack-safe
+// regardless of size.
+const N = 500;
+const chainDir = path.join(__dirname, "src", "chain");
+if (!fs.existsSync(chainDir)) {
+	fs.mkdirSync(chainDir, { recursive: true });
+	fs.writeFileSync(
+		path.join(chainDir, `mod-${N}.js`),
+		`export const value = [${N}];\nexport const config = { id: ${N} };\n`
+	);
+	for (let i = N - 1; i >= 0; i--) {
+		fs.writeFileSync(
+			path.join(chainDir, `mod-${i}.js`),
+			`import { value as imported } from "./mod-${i + 1}.js";
+export const value = [imported, ${i}];
+export const config = { id: ${i} };
+`
+		);
+	}
+}
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	mode: "production",
+	optimization: {
+		minimize: false
+	}
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Fix `RangeError: Maximum call stack size exceeded` thrown from `HarmonyImportSideEffectDependency.getModuleEvaluationSideEffectsState` on long linear chains of side-effect-free imports. `NormalModule.getSideEffectsConnectionState` previously descended through `HarmonyImportSideEffectDependency.getModuleEvaluationSideEffectsState` recursively, adding two stack frames per module, which overflowed V8's stack at a few thousand modules deep. The traversal is now iterative.