Der JavaScript-Ausnahmefehler "import declarations may only appear at top level of a module" tritt auf, wenn eineimport-Deklaration nicht auf der obersten Ebene eines Moduls steht. Dies könnte daran liegen, dass dieimport-Deklaration in andere Konstrukte (Funktionen, Blöcke usw.) verschachtelt ist oder häufiger, weil die aktuelle Datei nicht als Modul behandelt wird.

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?

Möglicherweise haben Sie eineimport-Deklaration, die in ein anderes Konstrukt verschachtelt ist, wie z.B. eine Funktion oder einen Block. Dieimport-Deklaration muss auf der obersten Ebene des Moduls stehen. Wenn Sie ein Modul bedingt importieren oder nach Bedarf lazy importieren möchten, verwenden Sie stattdessendynamischen Import.

Wenn dasimport bereits auf der obersten Ebene des Codes steht, könnte es daran liegen, dass die Datei nicht als Modul interpretiert wird. Laufzeiten benötigen externe Hinweise, um zu bestimmen, ob eine Datei ein Modul ist oder nicht, und hier sind mehrere Möglichkeiten, solche Hinweise zu geben:

• Wenn die Datei direkt aus HTML geladen wird, stellen Sie sicher, dass das<script>-Tag dastype="module"-Attribut hat.
• Wenn die Datei in Node ausgeführt wird, stellen Sie sicher, dass entweder die Datei die.mjs-Erweiterung hat oder die nächstepackage.json-Datei das"type": "module"-Feld enthält.
• Wenn die Datei alsworker ausgeführt wird, stellen Sie sicher, dass Sie denWorker()-Konstruktor mit der Optiontype: "module" aufrufen.
• Importieren Sie diese Datei aus einem anderen Modul.

Ein weiterer Grund könnte sein, wenn Sieimport mit einem Compiler (wie TypeScript) schreiben und versehentlich die Quelldatei ausgeführt haben. Daimport-Deklarationen normalerweise zu Beginn des Programms erscheinen, sind sie das Erste, was der Parser sieht, was zu Beschwerden führt. Stellen Sie sicher, dass Sie die Quelldatei kompilieren und die kompilierte Datei ausführen.

Beispiele

Bedingte Importe

Sie könnenimport nicht innerhalb anderer Konstrukte verwenden, wie Sie es möglicherweise in Python tun würden.

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

Entweder verschieben Sie dasimport 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 dastype="module"-Attribut dem<script>-Tag hinzufügen.

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

Wenn Sie aus irgendeinem Grund das Skript nicht in ein Modul migrieren können, können 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()