SyntaxError: import declarations may only appear at top level of a module

Meldung

SyntaxError: Cannot use import statement outside a module (V8-based)
SyntaxError: import declarations may only appear at top level of a module (Firefox)
SyntaxError: Unexpected identifier 'x'. import call expects one or two arguments. (Safari)

Fehlertyp

Was ist schiefgelaufen?

Mglicherweise haben Sie eine import-Deklaration, die in ein anderes Konstrukt verschachtelt ist, wie z.B. eine Funktion oder einen Block. Die import-Deklaration muss auf der obersten Ebene des Moduls stehen. Wenn Sie ein Modul bedingt importieren oder nach Bedarf lazy importieren mchten, verwenden Sie stattdessen dynamischen Import.

Wenn das import bereits auf der obersten Ebene des Codes steht, knnte es daran liegen, dass die Datei nicht als Modul interpretiert wird. Laufzeiten bentigen externe Hinweise, um zu bestimmen, ob eine Datei ein Modul ist oder nicht, und hier sind mehrere Mglichkeiten, solche Hinweise zu geben:

• Wenn die Datei direkt aus HTML geladen wird, stellen Sie sicher, dass das <script>-Tag das type="module"-Attribut hat.
• Wenn die Datei in Node ausgefhrt wird, stellen Sie sicher, dass entweder die Datei die .mjs-Erweiterung hat oder die nchste package.json-Datei das "type": "module"-Feld enthlt.
• Wenn die Datei als worker ausgefhrt wird, stellen Sie sicher, dass Sie den Worker()-Konstruktor mit der Option type: "module" aufrufen.
• Importieren Sie diese Datei aus einem anderen Modul.

Ein weiterer Grund knnte sein, wenn Sie import mit einem Compiler (wie TypeScript) schreiben und versehentlich die Quelldatei ausgefhrt haben. Da import-Deklarationen normalerweise zu Beginn des Programms erscheinen, sind sie das Erste, was der Parser sieht, was zu Beschwerden fhrt. Stellen Sie sicher, dass Sie die Quelldatei kompilieren und die kompilierte Datei ausfhren.

Beispiele

Bedingte Importe

Sie knnen import nicht innerhalb anderer Konstrukte verwenden, wie Sie es mglicherweise in Python tun wrden.

if (writeOutput) {
  import fs from "fs"; // SyntaxError
}

Entweder verschieben Sie das import auf die oberste Ebene oder verwenden den dynamischen Import.

if (writeOutput) {
  import("fs").then((fs) => {
    // use fs
  });
}

Importieren in einem Nicht-Modul-Skript

Wenn Sie das Skript aus HTML laden, stellen Sie sicher, dass Sie das type="module"-Attribut dem <script>-Tag hinzufgen.

<script type="module" src="main.js"></script>

Wenn Sie aus irgendeinem Grund das Skript nicht in ein Modul migrieren knnen, knnen Sie den dynamischen Import verwenden.

async function main() {
  const myModule = await import("./my-module.js");
  // use myModule
}

main();

Siehe auch

• Verwendung von Modulen
• import
• import()