Publicado: 18 de junho de 2025

Se você deseja importar um arquivo JSON em um módulo JavaScript, anteriormente tinha que passar por aros como incorporar JSON em JavaScript apenas para que você possa usar um regular
import declaração, ou baixar um arquivo com fetch() e então ligando
Response.json(). Este é um problema que agora está resolvido em todos os navegadores modernos graças a Scripts do módulo JSON
e atributos de importação.

A amostra a seguir mostra como um script do módulo JSON pode ser importado de dentro de um script do módulo JavaScript:

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 });

Não há JSON.parse() Necessário, o JSON está analisado e pronto para ir logo após o import. Isso funciona porque o navegador sabe de antemão que está lidando com o JSON, que você declara com o atributo de importação with { type: "json"
}.

Confira isso
Demonstração ao vivo das importações do módulo JSON Isso usa o código da listagem anterior.

A verificação do tipo MIME para scripts de módulo é rigoroso. Para que a busca do script do módulo JSON seja bem -sucedida, a resposta HTTP deve ter um tipo de MIME JSON, por exemplo Content-Type: text/json.

Se o with { type: "json" } Parte da instrução é omitida, o navegador assume que a intenção é importar um script do módulo JavaScript, e o busca falhará se a resposta HTTP tiver um tipo MIME que não é do tipo MIME JavaScript.

Você pode
Leia mais sobre o processamento do script do módulo JSON
Na especificação HTML.