Import Attributes in JavaScript Modules

Import attributes let a module consumer attach metadata to a particular module import, allowing the host to determine how that resource should be interpreted. A common use is specifying that an imported resource is JSON rather than JavaScript.

Import attributes are metadata attached to an `import` declaration or dynamic `import()` call. The attributes describe how the referenced module resource should be handled by the module system or its host environment.

A common example is JSON modules: `import data from "./config.json" with { type: "json" };`. The `type` attribute communicates that the referenced resource is intended to be interpreted as JSON. The exact behavior is ultimately defined by the JavaScript host, such as a browser or runtime.

Import attributes are different from ordinary imported bindings. `data` is the value exported by the module, while `with { type: "json" }` supplies metadata about the resource being loaded. This distinction matters because attributes do not create JavaScript variables or properties.

Dynamic imports can also receive attributes: `import("./config.json", { with: { type: "json" } })`. This is useful when the module path is determined at runtime while the resource still needs explicit interpretation metadata.

The modern syntax uses `with`. Older material may refer to the earlier `assert` syntax, but these forms should not be treated as interchangeable without considering the target environment and language specification being used.

Key points

• Import attributes attach metadata to a module resource.
• The `with` clause is used with static and dynamic imports.
• `type: "json"` is a common attribute for JSON module resources.
• Attributes describe resource interpretation; they are not imported bindings.
• Support and semantics are determined by the JavaScript host and its module implementation.

Interview questions

What are import attributes in JavaScript?

Import attributes let code attach metadata to a module import. The metadata can tell the host how a particular resource should be interpreted. A familiar example is `with { type: "json" }` for a JSON module. The attributes are separate from the bindings exported by the module.

How do you import a JSON module using import attributes?

A static import can use `import data from "./config.json" with { type: "json" };`. The `type` attribute tells the host that the resource is intended to be handled as JSON. With a dynamic import, the equivalent metadata is supplied as the second argument to `import()`. The resulting module namespace exposes the JSON value through its default export.

Are import attributes the same as imported properties?

No. An imported property is a binding obtained from the module's exports, while an import attribute is metadata attached to the module request. For example, `data` can be the imported value while `with { type: "json" }` describes the resource. Attributes therefore do not become properties on `data` or the module namespace.

Can dynamic import() use import attributes?

Yes. Dynamic `import()` accepts an options object after the module specifier, and that object can contain a `with` property for import attributes. For example, `import("./config.json", { with: { type: "json" } })` supplies JSON type metadata. The call still returns a promise for the module namespace.

What should you consider when using import attributes in a frontend application?

First, verify that the target browsers and tooling support the syntax and the particular attribute you need. Import attributes are interpreted by the module host, so support is not simply a property of JavaScript syntax alone. Build tools may also parse, transform, or otherwise process module attributes. Finally, distinguish language syntax from the host's resource-loading behavior when diagnosing compatibility issues.