Os scripts do módulo JSON estão disponíveis como padrão

disponível. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

Publicado em 18 de junho de 2025

Se você quiser importar um arquivo JSON em um módulo JavaScript, antes era necessário passar por etapas como a incorporação de JSON em JavaScript apenas para usar uma instrução import normal ou fazer o download de um arquivo com fetch() e, em seguida, chamar Response.json(). Esse problema foi resolvido em todos os navegadores modernos graças aos scripts de módulo JSON e aos atributos de importação.

O exemplo a seguir mostra como um script de módulo JSON pode ser importado de dentro de um script de 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 é necessário JSON.parse(). O JSON é analisado e fica pronto para uso logo após import. Isso funciona porque o navegador sabe de antemão que está lidando com JSON, que você declara com o atributo de importação with { type: "json" }.

Confira esta demonstração ao vivo de importações de módulos JSON que usa o código da lista anterior.

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

Se a parte with { type: "json" } da instrução for omitida, o navegador vai presumir que a intent é para importar um script de módulo JavaScript, e a busca vai falhar se a resposta HTTP tiver um tipo MIME que não seja um tipo MIME JavaScript.

Leia mais sobre o processamento de scripts de módulo JSON na especificação do HTML.