Als JavaScript- und TypeScript-Entwickler stoßen wir bei der Arbeit mit verschiedenen Modulsystemen häufig auf unerwartete Fehler. Ein häufiges Problem ist der Fehler „Importanweisung kann nicht außerhalb eines Moduls verwendet werden“. Es taucht normalerweise auf, wenn man mit modernen ES-Modulen (ESM) arbeitet oder sich mit Setups beschäftigt, die Bundler wie Webpack-, Babel- oder Node.js-Umgebungen beinhalten. In diesem Blog untersuchen wir, was diesen Fehler verursacht, warum er auftritt und praktische Lösungen zu seiner Behebung.

Was bedeutet dieser Fehler?

Der Fehler „Importanweisung kann nicht außerhalb eines Moduls verwendet werden“ ist selbsterklärend: Er tritt auf, wenn JavaScript auf eine Importanweisung außerhalb eines gültigen ES-Moduls stößt. In JavaScript bestimmen Modulsysteme, wie Code aufgeteilt wird in mehrere Dateien und wie sie miteinander interagieren ES-Module (Import/Export) und CommonJS (require/module.exports) sind die beiden primären Modulsysteme.

Wenn JavaScript Ihren Code nicht als ES-Modul erkennt, wird dieser Fehler ausgegeben.

Was verursacht den Fehler „Importanweisung kann nicht außerhalb eines Moduls verwendet werden“?

Dies tritt im Allgemeinen auf, wenn JavaScript/TypeScript auf eine Importanweisung außerhalb eines Modulkontexts stößt. Das bedeutet, dass die Datei, aus der Sie importieren möchten, nicht als ES-Modul erkannt wird.

Hier sind einige häufigere Gründe, warum dieser Fehler auftreten könnte:

• Node.js verwendet standardmäßig CommonJS: Standardmäßig verwendet Node.js CommonJS-Module (CJS), keine ES-Module. Dies bedeutet, dass die Import-/Exportsyntax nicht nativ unterstützt wird, sofern nicht anders angegeben.

• Falsch konfiguriertes Babel/Webpack: Beim Bündeln Ihres Codes sind Tools wie Babel oder Webpack möglicherweise nicht für die korrekte Verarbeitung von ES-Modulen konfiguriert, insbesondere wenn die Zielumgebung sie nicht nativ unterstützt.

• Fehlender „Typ“: „Modul“ in package.json: Wenn Sie ES-Module in einem Node.js-Projekt verwenden, müssen Sie dies explizit angeben, indem Sie „Typ“ hinzufügen. : „Modul“ in Ihrer package.json.

• Dateierweiterungskonflikt: Manchmal kann die Verwendung von .js anstelle von .mjs für ES-Module oder umgekehrt zu diesem Fehler führen.

Schritt-für-Schritt-Lösungen

Hier sind einige Lösungen zur Behebung des Fehlers „Importanweisung kann nicht außerhalb eines Moduls verwendet werden“:

• ES-Module in Node.js aktivieren:

Der häufigste Fall ist die Arbeit mit Node.js, das standardmäßig CommonJS-Module verwendet. Um ES-Module zu aktivieren, gehen Sie wie folgt vor:

Methode 1: package.json ändern:

{
  "type": "module"
}

Indem Sie „type“: „module“ zu Ihrer package.json hinzufügen, weisen Sie Node.js an, alle .js-Dateien als ES-Module zu behandeln.

Methode 2: Dateien in .mjs umbenennen:

Wenn Sie Ihre package.json nicht ändern möchten, können Sie Ihre Dateien in .mjs umbenennen (z. B. index.mjs), um explizit anzugeben, dass es sich um ES-Module handelt.

• Babel/Webpack-Konfiguration aktualisieren:

Wenn Sie Babel oder Webpack verwenden, stellen Sie sicher, dass diese für die korrekte Verarbeitung von ES-Modulen konfiguriert sind. Für Babel können Sie das Plugin @babel/preset-modules verwenden. Setzen Sie für Webpack das Modul in Ihrer Konfiguration auf „false“.

Für Babel: Aktualisieren Sie die Datei .babelrc oder babel.config.json:

{
  "presets": ["@babel/preset-modules"]
}

Für Webpack: Aktualisieren Sie die Datei webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

• Importpfad und Syntax prüfen:

Stellen Sie sicher, dass Ihre Importpfade korrekt sind und dass Sie die richtige Syntax verwenden. Relative Pfade sollten beispielsweise mit ./ oder ../.

Wenn Sie ein Modul aus node_modules importieren, stellen Sie sicher, dass das Paket ES-Module unterstützt. Wenn nicht, müssen Sie möglicherweise einen Bundler wie Webpack verwenden, um damit umzugehen.

• Dateierweiterungen doppelt prüfen:

Wenn Sie ES-Module verwenden, stellen Sie sicher, dass Ihre Dateierweiterungen mit dem Modultyp übereinstimmen. Verwenden Sie .mjs für ES-Module und .js für CommonJS-Module.

• .mjs: ES-Module
• .cjs: CommonJS-Module

Was ist der Unterschied zwischen ES-Modulen und CommonJS-Modulen?

Eine Sache, die mir in den Sinn kommt, ist: Was ist der Unterschied zwischen ES-Modulen und CommonJS-Modulen? Und warum gibt es in JavaScript zwei verschiedene Modulsysteme?

ES-Module

ES-Module sind das offizielle JavaScript-Modulsystem, das in ES6 (ES2015) eingeführt wurde. Sie verwenden die Schlüsselwörter import und export, um Abhängigkeiten zwischen Modulen zu definieren. ES-Module sind statisch analysierbar, was bedeutet, dass die Abhängigkeiten zur Kompilierungszeit aufgelöst werden, was die Codeoptimierung erleichtert.

ES-Module werden asynchron geladen, was eine bessere Leistung und paralleles Laden von Modulen ermöglicht. Sie unterstützen auch benannte Exporte, Standardexporte und zyklische Abhängigkeiten. ES-Module werden in modernen Browsern und Node.js weitgehend unterstützt (mit dem Flag „type“: „module“).

CommonJS-Module

CommonJS ist ein Modulsystem, das in Node.js und anderen Umgebungen verwendet wurde, bevor ES-Module eingeführt wurden. CommonJS-Module verwenden die Funktion require zum Importieren von Modulen und module.exports oder exports zum Exportieren von Werten. CommonJS-Module werden synchron geladen, was zu Leistungsproblemen führen kann.

CommonJS-Module werden in Browsern nicht nativ unterstützt, können aber mit Tools wie Babel oder Webpack in ES-Module transpiliert werden. CommonJS-Module werden in Node.js-Projekten immer noch häufig verwendet, aber ES-Module werden aufgrund ihrer besseren Leistung und statischen Analysierbarkeit immer beliebter.

Der Grund für die Existenz dieser beiden Modulsysteme liegt in der Entwicklung von JavaScript und dem Bedarf an einem moderneren, standardisierten Modulsystem. ES-Module sind die Zukunft der JavaScript-Module, aber CommonJS-Module werden in bestehenden Projekten und Umgebungen immer noch häufig verwendet.

Tipps zum Debuggen

Wenn Sie alle oben genannten Lösungen ausprobiert haben und der Fehler immer noch auftritt, finden Sie hier einige zusätzliche Debugging-Tipps:

• Überprüfen Sie die Node.js-Version: Stellen Sie sicher, dass Sie Node.js Version 12.x oder höher ausführen, da die ES-Modulunterstützung nativ in Node.js 12 eingeführt wurde. Wenn ja Auf einer älteren Version funktionieren ES-Module nicht. Aktualisieren Sie Ihre Version, indem Sie die Node.js-Website besuchen.

• Browserunterstützung prüfen: Wenn Sie in einer Browserumgebung arbeiten, stellen Sie sicher, dass Ihr Browser ES-Module unterstützt. Bei den meisten modernen Browsern ist dies der Fall, bei älteren Versionen jedoch möglicherweise nicht.

• Auf Tippfehler prüfen: Manchmal kann ein einfacher Tippfehler in Ihrem Code diesen Fehler verursachen. Überprüfen Sie Ihren Code noch einmal auf Rechtschreibfehler oder falsche Syntax.

• Verwenden Sie npx tsc für TypeScript: Wenn Sie TypeScript verwenden und dieser Fehler auftritt, führen Sie npx tsc aus, um Ihren TypeScript-Code in JavaScript zu kompilieren, was bei der Erkennung von Problemen hilfreich sein kann.

Abschluss

Der Fehler „Importanweisung kann nicht außerhalb eines Moduls verwendet werden“ ist ein häufiges Problem, mit dem JavaScript-/TypeScript-Entwickler bei der Arbeit mit ES-Modulen konfrontiert sind. Wenn Sie verstehen, warum dieser Fehler auftritt, und die in diesem Blog bereitgestellten Schritt-für-Schritt-Lösungen befolgen, können Sie ihn schnell beheben und mit der Erstellung modularen, wartbaren Codes fortfahren.