fix(css): include chunk groups in conflicting order warning (#20660)

aryanraj45 · web-flow · commit 70867d612e19 · 2026-03-23T17:22:50.000+03:00
diff --git a/.changeset/brown-goats-kiss.md b/.changeset/brown-goats-kiss.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Included fragment groups in the conflicting order warning for CSS.
diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js
@@ -770,18 +770,43 @@ class CssModulesPlugin {
 				break;
 			}
 			if (hasFailed) {
+				const fallbackModule = /** @type {Module} */ (hasFailed);
+
+				const fallbackIssuers = [
+					...compilation.moduleGraph
+						.getIncomingConnectionsByOriginModule(fallbackModule)
+						.keys()
+				].filter(Boolean);
+
+				const selectedIssuers = [
+					...compilation.moduleGraph
+						.getIncomingConnectionsByOriginModule(selectedModule)
+						.keys()
+				].filter(Boolean);
+
+				const allIssuers = [
+					...new Set([...fallbackIssuers, ...selectedIssuers])
+				]
+					.map((m) =>
+						/** @type {Module} */ (m).readableIdentifier(
+							compilation.requestShortener
+						)
+					)
+					.sort();
+
 				// There is a not resolve-able conflict with the selectedModule
-				// TODO print better warning
 				compilation.warnings.push(
 					new WebpackError(
-						`chunk ${chunk.name || chunk.id}\nConflicting order between ${hasFailed.readableIdentifier(
+						`chunk ${
+							chunk.name || chunk.id
+						}\nConflicting order between ${fallbackModule.readableIdentifier(
 							compilation.requestShortener
 						)} and ${selectedModule.readableIdentifier(
 							compilation.requestShortener
-						)}`
+						)}\nCSS modules are imported in:\n  - ${allIssuers.join("\n  - ")}`
 					)
 				);
-				selectedModule = /** @type {Module} */ (hasFailed);
+				selectedModule = fallbackModule;
 			}
 			// Insert the selected module into the final modules list
 			finalModules.push(selectedModule);
diff --git a/test/configCases/css/conflicting-order/warnings.js b/test/configCases/css/conflicting-order/warnings.js
@@ -1,5 +1,7 @@
 "use strict";
 
 module.exports = [
-	[/Conflicting order between css \.\/b\.css and css \.\/c\.css/]
+	[
+		/Conflicting order between css \.\/b\.css and css \.\/c\.css\nCSS modules are imported in:\n {2}- css \.\/lazy1\.css\n {2}- css \.\/lazy2\.css/
+	]
 ];

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Included fragment groups in the conflicting order warning for CSS.