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,

01

Understand 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.

es2024modulesjson

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 th

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

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

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.