JSON in ES-Modulen importieren (ohne Fetch, ohne Bundler)

Wenn Sie jemals versucht haben, import config from './config.json' in einem reinen ES-Modul-Projekt zu verwenden und dabei auf eine Mauer gestoßen sind, sind Sie nicht allein. Jahrelang bedeutete das Importieren von JSON ohne Bundler, auf fetch() zurückzugreifen oder die Daten in eine JavaScript-Datei zu konvertieren. Diese Ära der Workarounds ist vorbei.

Seit 2025 sind Import Attributes browserübergreifend in modernen Browsern verfügbar. Sie können jetzt einen nativen JavaScript-JSON-Modul-Import durchführen, ohne jegliche Build-Tools.

Die moderne Syntax: Import Attributes

Die aktuelle Syntax verwendet das with-Schlüsselwort, um den Modultyp zu deklarieren:

// Static import
import config from './config.json' with { type: 'json' }

console.log(config.apiUrl)

Für dynamisches Laden:

// Dynamic import
const { default: config } = await import('./config.json', {
  with: { type: 'json' }
})

Hinweis: Die ältere assert { type: 'json' }-Syntax (unterstützt in Chrome 91–122) ist mittlerweile veraltet. Verwenden Sie immer with.

Warum das type: 'json'-Attribut erforderlich ist

Das with { type: 'json' }-Attribut ist keine optionale Dekoration. Es erfüllt einen spezifischen Sicherheitszweck: Es zwingt den Browser oder die Runtime, den MIME-Typ der Antwort als application/json zu validieren, bevor irgendetwas verarbeitet wird.

Ohne dieses Attribut könnte ein Server JavaScript zurückgeben, das als JSON-Datei getarnt ist, und die Engine hätte keine Möglichkeit, diese Unterscheidung durchzusetzen. Das Type-Attribut verhindert dies.

JSON-Module haben nur einen Default-Export

Ein Punkt, über den Entwickler stolpern: JSON-Module unterstützen keine Named Exports. Das gesamte JSON-Objekt wird als Default-Export bereitgestellt.

import data from './data.json' with { type: 'json' }

// ✅ Korrekt
const { users, settings } = data

// ❌ Das funktioniert nicht
import { users } from './data.json' with { type: 'json' }

Destrukturieren Sie nach dem Import aus dem Default-Export.

Browser- und Node.js-Unterstützung

All diese Versionen sind mittlerweile weit verbreitet. Wenn Sie moderne Browser und aktuelle Node.js-Releases anvisieren, benötigen Sie weder einen Bundler noch einen fetch()-Aufruf, um JSON zu laden.

Hinweis: Frühere Node.js-Versionen stellten JSON-Module hinter experimentellen Flags bereit. Die Unterstützung von JSON-Modulen mit Import Attributes ist in aktuellen Node.js-Releases nun stabil. Details zu den genauen Versionen finden Sie in der Node.js ESM-Dokumentation.

Praktische Einschränkungen, die Sie vor dem Deployment kennen sollten

Sie benötigen einen HTTP-Server. Modul-Imports – einschließlich JSON-Module – funktionieren im Allgemeinen nicht, wenn Seiten direkt über file:// geladen werden. Browser wenden strenge Sicherheitsregeln auf das Laden von Modulen an. Verwenden Sie einen lokalen Dev-Server wie Vite, serve oder einen beliebigen Static-File-Server.

Ihre JSON-Datei muss mit dem korrekten MIME-Typ ausgeliefert werden. Der Server muss Content-Type: application/json zurückgeben. Die meisten Static-Server handhaben dies automatisch für .json-Dateien, aber überprüfen Sie dies doppelt, wenn Sie einen benutzerdefinierten Server oder eine CDN-Konfiguration verwenden.

JSON muss valide sein. Es gibt keine Fehlerbehandlung auf Import-Ebene. Ein Syntaxfehler in Ihrer JSON-Datei führt dazu, dass das Modul vollständig nicht geladen werden kann. Validieren Sie Ihr JSON vor dem Deployment.

Ein praxisnahes Beispiel

// config.json
{
  "apiUrl": "https://api.example.com",
  "timeout": 5000,
  "features": {
    "darkMode": true
  }
}

// app.js
import config from './config.json' with { type: 'json' }

const { apiUrl, timeout, features } = config

if (!apiUrl || typeof timeout !== 'number') {
  throw new Error('Invalid configuration')
}

Dieses Muster funktioniert einwandfrei für Konfigurationsdateien, Feature-Flags, i18n-Strings oder beliebige statische strukturierte Daten, die Ihre App beim Start benötigt.

Fazit

Import Attributes bieten Ihnen eine saubere, native Möglichkeit, JSON in ES-Modulen zu importieren – ohne fetch(), ohne Bundler und ohne Workarounds. Die with { type: 'json' }-Syntax wird mittlerweile in modernen Browsern und aktuellen Node.js-Releases umfassend unterstützt. Stellen Sie einfach sicher, dass Ihre Dateien über HTTP mit dem richtigen MIME-Typ ausgeliefert werden, und Sie sind startklar.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.