fix: context modules with import attributes (#19984)

alexander-akait · web-flow · commit c7dd06632760 · 2025-10-07T01:24:44.000+03:00
diff --git a/lib/ContextModule.js b/lib/ContextModule.js
@@ -254,10 +254,12 @@ class ContextModule extends Module {
 		} else if (this.options.namespaceObject) {
 			identifier += "|namespace object";
 		}
+		if (this.options.attributes) {
+			identifier += `|importAttributes: ${JSON.stringify(this.options.attributes)}`;
+		}
 		if (this.layer) {
 			identifier += `|layer: ${this.layer}`;
 		}
-
 		return identifier;
 	}
 
diff --git a/lib/asset/AssetBytesGenerator.js b/lib/asset/AssetBytesGenerator.js
@@ -53,6 +53,7 @@ class AssetSourceGenerator extends Generator {
 
 				const encodedSource = originalSource.buffer().toString("base64");
 
+				runtimeRequirements.add(RuntimeGlobals.requireScope);
 				runtimeRequirements.add(RuntimeGlobals.toBinary);
 
 				let sourceContent;
diff --git a/lib/dependencies/ContextElementDependency.js b/lib/dependencies/ContextElementDependency.js
@@ -68,8 +68,8 @@ class ContextElementDependency extends ModuleDependency {
 	 */
 	getResourceIdentifier() {
 		let str = super.getResourceIdentifier();
-		if (this.attributes !== undefined) {
-			str += JSON.stringify(this.attributes);
+		if (this.attributes) {
+			str += `|importAttributes${JSON.stringify(this.attributes)}`;
 		}
 		return str;
 	}
diff --git a/lib/dependencies/HarmonyImportDependency.js b/lib/dependencies/HarmonyImportDependency.js
@@ -79,8 +79,11 @@ class HarmonyImportDependency extends ModuleDependency {
 	 */
 	getResourceIdentifier() {
 		let str = super.getResourceIdentifier();
-		if (this.attributes !== undefined) {
-			str += JSON.stringify(this.attributes);
+		if (this.defer) {
+			str += "|defer";
+		}
+		if (this.attributes) {
+			str += `|importAttributes${JSON.stringify(this.attributes)}`;
 		}
 		return str;
 	}
diff --git a/lib/dependencies/ImportContextDependency.js b/lib/dependencies/ImportContextDependency.js
@@ -35,6 +35,19 @@ class ImportContextDependency extends ContextDependency {
 		return "esm";
 	}
 
+	/**
+	 * @returns {string | null} an identifier to merge equal requests
+	 */
+	getResourceIdentifier() {
+		let str = super.getResourceIdentifier();
+
+		if (this.options.attributes) {
+			str += `|importAttributes${JSON.stringify(this.options.attributes)}`;
+		}
+
+		return str;
+	}
+
 	/**
 	 * @param {ObjectSerializerContext} context context
 	 */
diff --git a/lib/dependencies/ImportDependency.js b/lib/dependencies/ImportDependency.js
@@ -50,8 +50,8 @@ class ImportDependency extends ModuleDependency {
 	 */
 	getResourceIdentifier() {
 		let str = super.getResourceIdentifier();
-		if (this.attributes !== undefined) {
-			str += JSON.stringify(this.attributes);
+		if (this.attributes) {
+			str += `|importAttributes${JSON.stringify(this.attributes)}`;
 		}
 		return str;
 	}
diff --git a/test/configCases/asset-modules/bytes/index.js b/test/configCases/asset-modules/bytes/index.js
@@ -1,12 +1,17 @@
 import * as style from "./style.css";
 import file from "./file.text" with { type: "bytes" };
 
-it("should work", () => {
+it("should work", async () => {
 	const decoder = new TextDecoder('utf-8');
 	const text = decoder.decode(file);
 
 	expect(text).toBe("a &#256; &#65536; &#25991; &#129412; Text");
 
+	const dyn = (await import("./file.text?other", { with: { type: "bytes" } })).default;
+	const dynText = decoder.decode(dyn);
+
+	expect(dynText).toBe("a &#256; &#65536; &#25991; &#129412; Text");
+
 	if (typeof getComputedStyle === "function") {
 		const style = getComputedStyle(document.body);
 		expect(style.getPropertyValue("--my-url")).toBe(" url(data:application/octet-stream;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj48dGl0bGU+aWNvbi1zcXVhcmUtc21hbGw8L3RpdGxlPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zMDAgLjFMNTY1IDE1MHYyOTkuOUwzMDAgNTk5LjggMzUgNDQ5LjlWMTUweiIvPjxwYXRoIGZpbGw9IiM4RUQ2RkIiIGQ9Ik01MTcuNyA0MzkuNUwzMDguOCA1NTcuOHYtOTJMNDM5IDM5NC4xbDc4LjcgNDUuNHptMTQuMy0xMi45VjE3OS40bC03Ni40IDQ0LjF2MTU5bDc2LjQgNDQuMXpNODEuNSA0MzkuNWwyMDguOSAxMTguMnYtOTJsLTEzMC4yLTcxLjYtNzguNyA0NS40em0tMTQuMy0xMi45VjE3OS40bDc2LjQgNDQuMXYxNTlsLTc2LjQgNDQuMXptOC45LTI2My4yTDI5MC40IDQyLjJ2ODlsLTEzNy4zIDc1LjUtMS4xLjYtNzUuOS00My45em00NDYuOSAwTDMwOC44IDQyLjJ2ODlMNDQ2IDIwNi44bDEuMS42IDc1LjktNDR6Ii8+PHBhdGggZmlsbD0iIzFDNzhDMCIgZD0iTTI5MC40IDQ0NC44TDE2MiAzNzQuMVYyMzQuMmwxMjguNCA3NC4xdjEzNi41em0xOC40IDBsMTI4LjQtNzAuNnYtMTQwbC0xMjguNCA3NC4xdjEzNi41ek0yOTkuNiAzMDN6bS0xMjktODVsMTI5LTcwLjlMNDI4LjUgMjE4bC0xMjguOSA3NC40LTEyOS03NC40eiIvPjwvc3ZnPg==)");
diff --git a/test/configCases/asset-modules/bytes/test.config.js b/test/configCases/asset-modules/bytes/test.config.js
@@ -14,5 +14,15 @@ module.exports = {
 		scope.window.document.head.appendChild(link);
 
 		run++;
+	},
+	findBundle(i) {
+		if (i === 2) {
+			return ["bundle2.mjs"];
+		}
+
+		return [
+			`file_text_other.bundle${i}.${i === 2 ? "mjs" : "js"}`,
+			`bundle${i}.${i === 2 ? "mjs" : "js"}`
+		];
 	}
 };
diff --git a/test/configCases/context-modules/import-attributes/files/file.ext b/test/configCases/context-modules/import-attributes/files/file.ext
@@ -0,0 +1,3 @@
+{
+	"foo": "bar"
+}
diff --git a/test/configCases/context-modules/import-attributes/index.js b/test/configCases/context-modules/import-attributes/index.js
@@ -0,0 +1,12 @@
+it("show override request", async () => {
+	const decoder = new TextDecoder('utf-8');
+	const mod = "file.ext";
+	const loadedMod = (await import(`./files/${mod}`, { with: { type: "bytes" } })).default;
+	const text = decoder.decode(loadedMod);
+
+	expect(JSON.parse(text)).toEqual({ foo: "bar" });
+
+	const otherLoadedMod = (await import(`./files/${mod}`, { with: { type: "json" } })).default;
+
+	expect(otherLoadedMod.foo).toBe("bar");
+});
diff --git a/test/configCases/context-modules/import-attributes/test.filter.js b/test/configCases/context-modules/import-attributes/test.filter.js
@@ -0,0 +1,5 @@
+"use strict";
+
+const supportsTextDecoder = require("../../../helpers/supportsTextDecoder");
+
+module.exports = () => supportsTextDecoder();
diff --git a/test/configCases/context-modules/import-attributes/webpack.config.js b/test/configCases/context-modules/import-attributes/webpack.config.js
@@ -0,0 +1,4 @@
+"use strict";
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {};

Original file line number	Diff line number	Diff line change
`@@ -254,10 +254,12 @@ class ContextModule extends Module {`
`254`	`254`	`} else if (this.options.namespaceObject) {`
`255`	`255`	`identifier += "\|namespace object";`
`256`	`256`	`}`
	`257`	`+ if (this.options.attributes) {`
	`258`	+ identifier += `\|importAttributes: ${JSON.stringify(this.options.attributes)}`;
	`259`	`+ }`
`257`	`260`	`if (this.layer) {`
`258`	`261`	identifier += `\|layer: ${this.layer}`;
`259`	`262`	`}`
`260`		`-`
`261`	`263`	`return identifier;`
`262`	`264`	`}`
`263`	`265`
Original file line number	Diff line number	Diff line change
`@@ -68,8 +68,8 @@ class ContextElementDependency extends ModuleDependency {`
`68`	`68`	`*/`
`69`	`69`	`getResourceIdentifier() {`
`70`	`70`	`let str = super.getResourceIdentifier();`
`71`		`- if (this.attributes !== undefined) {`
`72`		`- str += JSON.stringify(this.attributes);`
	`71`	`+ if (this.attributes) {`
	`72`	+ str += `\|importAttributes${JSON.stringify(this.attributes)}`;
`73`	`73`	`}`
`74`	`74`	`return str;`
`75`	`75`	`}`
Original file line number	Diff line number	Diff line change
`@@ -79,8 +79,11 @@ class HarmonyImportDependency extends ModuleDependency {`
`79`	`79`	`*/`
`80`	`80`	`getResourceIdentifier() {`
`81`	`81`	`let str = super.getResourceIdentifier();`
`82`		`- if (this.attributes !== undefined) {`
`83`		`- str += JSON.stringify(this.attributes);`
	`82`	`+ if (this.defer) {`
	`83`	`+ str += "\|defer";`
	`84`	`+ }`
	`85`	`+ if (this.attributes) {`
	`86`	+ str += `\|importAttributes${JSON.stringify(this.attributes)}`;
`84`	`87`	`}`
`85`	`88`	`return str;`
`86`	`89`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,8 +50,8 @@ class ImportDependency extends ModuleDependency {`
`50`	`50`	`*/`
`51`	`51`	`getResourceIdentifier() {`
`52`	`52`	`let str = super.getResourceIdentifier();`
`53`		`- if (this.attributes !== undefined) {`
`54`		`- str += JSON.stringify(this.attributes);`
	`53`	`+ if (this.attributes) {`
	`54`	+ str += `\|importAttributes${JSON.stringify(this.attributes)}`;
`55`	`55`	`}`
`56`	`56`	`return str;`
`57`	`57`	`}`