JSON modules allow statically importing JSON instead of consuming JSON dynamically through fetch(). JSON modules, like JavaSCript modules, are fetched using “cors” mode and strict MIME type checking. They also share the same module import syntax, for example: import data from "./resource.json”.

Motivation

There is not currently a way for developers to statically import JSON content as part of module graph instantiation. Currently developers are forced to consume JSON content dynamically through e.g. fetch(). See GitHub thread here for extensive discussion and many comments indicating support: https://github.com/whatwg/html/issues/4315. The StackOverflow thread here also contains comments highlighting the lack of this feature in ES6: https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6

Specification

Established standard

Status in Chromium

Blink>DOM


Enabled by default (tracking bug) in:

  • Chrome for desktop release 91
  • Chrome for Android release 91
  • Android WebView release 91

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

JSON, Module, import, static, graph,

Last updated on 2021-07-17