JSON Modules

Category: JavaScript
Type: New or changed feature
Status: Enabled by default (Chrome 91)
Intent stage: Shipped

Summary

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

Standards & signals

Specification: https://github.com/whatwg/html/pull/4407
Firefox: Positive
Safari: No signal
Web developers: Strongly positive — There were many expressions of support in #4315. There were some requests in that thread to expand the feature to support named exports, but the due to the complexity and ambiguity involved this was not included.
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=964248

Docs: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/SyntheticModules/designDoc.md https://groups.google.com/a/chromium.org/d/topic/blink-dev/ojwkySW-bpQ/discussion

Explainers: https://github.com/whatwg/html/issues/4315

View on chromestatus.com