Import attributes
The import attributes feature instructs the runtime about how a module should be loaded, including the behavior of module resolution, fetching, parsing, and evaluation. It’s supported in import declarations, export…from declarations, and dynamic import().
Attributes can be attached to any kind of import/export from statement, including default import, namespace import, etc. They follow the module specifier string and start with the with keyword. When used with import(), the attributes are specified in the options parameter as the with property.
Syntax
import { names } from "module-name" with {};
import { names } from "module-name" with { key: "data" };
import { names } from "module-name" with { key: "data", key2: "data2" };
import { names } from "module-name" with { key: "data", key2: "data2", /* …, */ keyN: "dataN" };
export { names } from "module-name" with {};
export { names } from "module-name" with { key: "data" };
export { names } from "module-name" with { key: "data", key2: "data2" };
export { names } from "module-name" with { key: "data", key2: "data2", /* …, */ keyN: "dataN" };Standard attributes
JSON Modules ({ type: “json” })
import data from "https://example.com/data.json" with { type: "json" };CSS Modules ({ type: “css” })
import exampleStyles from "https://example.com/example_styles.css" with { type: "css" };document.adoptedStyleSheets.push(exampleStyles);
Examples
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<script type="module">
import data from "./data.json" with { type: "json" };
const p = document.createElement("p");
p.textContent = `name: ${data.name}`;
document.body.appendChild(p);
</script>
</head>
<body></body>
</html>Using import attributes with dynamic import
Import attributes are also accepted as the second parameter of the import() syntax.
const data = await import("./data.json", {
with: { type: "json" },
});