How to import JSON files in ES modules

If you're using EcmaScript modules, you probably know the problem that you can't "just" import JSON files. To import and load a JSON file in an ES module, you have to do a "window.fetch dance" to request the file and parse it yourself. It's not great...

But there's hope! According to chromestatus.com, JSON Modules are shipping in Chrome 91. I gave it a quick try, and surprisingly, the following JavaScript code does not work.

<script type="module">
  import data from "./data.json";
  console.log(data);
</script>

It throws the following exception in Chrome 91:

I didn't have a detailed look at the spec discussion about this topic, but apparently, the new syntax to import JSON Modules is the following. 😲

import data from "./data.json" assert { type: "json" };

console.log(data);

That's quite something, and I have to do some reading about it. But hey, anything that makes it easier to import JSON is more than welcome!

What's the browser support?

MDN Compat Data (source)

Browser support info for Import assertions

91	91	91	Nei	Non	15	15	16.0	91

At the time of writing, we're still waiting for Firefox to join the party.

If you're wondering about Node.js, importing JSON files are marked as experimental in the current LTS.

import obj from "mod" with { "type": "json" }

Additional resources: Axel Rauschmayer shared that JSON imports are based on import assertions and you can read more about it on his blog.