Native JSON imports arrive in all modern browsers
Developers have long faced friction when importing JSON data into JavaScript modules. The usual workarounds—inlining JSON as a JavaScript object literal so a regular import works, or fetching the file and parsing it with Response.json()—are no longer necessary. With JSON module scripts and import attributes now supported across all modern engines, JSON can be imported directly.
The import syntax declares the data type up front with an import attribute:
import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };
const {explanation, title, url} = astronomyPictureOfTheDay;
document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });
No JSON.parse() call is required after the import; the browser parses the JSON beforehand because the with { type: "json" } attribute tells the runtime exactly what kind of resource is being requested. A live demo shows this in action.
Strict MIME type handling
Module scripts are subject to strict MIME type enforcement. For a JSON module fetch to succeed, the HTTP response must carry a JSON MIME type, such as Content-Type: application/json. Omitting the with { type: "json" } attribute signals to the browser that a JavaScript module script is expected; the fetch then fails if the response's MIME type is not a JavaScript MIME type. The HTML spec details the JSON module script processing algorithm.
