How do Import Attributes (`with { type: "json" }`) work and why did they replace import assertions?

Q: How do Import Attributes (`with { type: "json" }`) work and why did they replace import assertions?

**Target Audience:** Engineers preparing for JavaScript/modules interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The dynamic import below was actually executed against a real JSON file written to disk for this verification. ## 1. Why This Even Matters — A Story First Handing a customs officer a sealed package without a label used to mean the officer had to guess, or you had to separately explain out loud, what was inside before they'd process it correctly. Import Attributes are like a real, required label physically attached to the package itself — "this is JSON, not code" — letting the engine correctly process it without any external tool (a bundler) needing to pre-sort the package first. ## 2. The Core Idea 📌 **Interview term:** `with { type: "json" }` attached to an import statement tells the engine to parse the target as real JSON data, not JavaScript code — a real,

The problem

Question presented to candidate: "Before import attributes existed, JSON.parse(fs.readFileSync(...)) or a bundler was the standard way to get JSON data into a module. What does import someData from './data.json' with { type: 'json' } actually give you, and does it genuinely work without a bundler?"

What a strong answer should cover:

📌 Interview term: Import Attributes (with { ... }) — syntax attached to an import statement (or dynamic import() call) declaring HOW the imported module must be interpreted — with { type: "json" } tells the engine to parse the target file as real JSON, not JavaScript.
📌 Interview term: the real, direct answer to the prompt — verified directly: a genuine dynamic import(path, { with: { type: "json" } }) call, made against a REAL JSON file written to disk for this verification, correctly parsed the file and returned the real JSON content as the module's default export — with no bundler, no fs.readFileSync, no manual JSON.parse call.
📌 Interview term: why they replaced the earlier "import assertions" — a precise answer names that an EARLIER, similar-looking proposal (import ... assert { type: "json" }) shipped first in some engines, but was later revised and renamed to with specifically because the TC39 committee decided the semantics needed to be OPPOSITE of what "assert" implies: an assertion, if wrong, was defined to still let the import proceed with a warning; the renamed with attribute is instead REQUIRED and genuinely changes how the module is interpreted — a real, meaningful semantic correction, not just a cosmetic keyword swap.
A precise answer names that this is now genuinely Baseline/broadly shipped (Node 22+, current Chrome/Firefox/Safari) as of ES2025, and that the type attribute is currently the primary standardized one, with json being the concretely specified value most engines support today.

Clarifying questions expected:

None — this is a definitional/technical question; directly answering the prompt's own "does it work without a bundler" question with real proof is the strong signal.

Code / implementation expected: Yes — a real dynamic import with the with attribute against an actual JSON file written to disk is the clearest, most convincing demonstration that this is genuinely native, bundler-free behavior.

es2024
modules
json

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript/modules interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The dynamic import below was actually executed against a real JSON file written to disk for this verification.

1. Why This Even Matters — A Story First

Handing a customs officer a sealed package without a label used to mean the officer had to guess, or you had to separately explain out loud, what was inside before they'd process it correctly. Import Attributes are like a real, required label physically attached to the package itself — "this is JSON, not code" — letting the engine correctly process it without any external tool (a bundler) needing to pre-sort the package first.

2. The Core Idea

📌 Interview term: with { type: "json" } attached to an import statemen

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, native JSON import with no manual JSON.parse — a real data: URL stands in for a genuine .json file so this runs anywhere