JavaScript および TypeScript の開発者は、さまざまなモジュール システムを使用しているときに予期しないエラーに遭遇することがよくあります。よくある問題の 1 つは、「モジュールの外ではインポート ステートメントを使用できません」というエラーです。通常、最新の ES モジュール (ESM) を使用する場合、または Webpack、Babel、Node.js 環境などのバンドラーが関与するセットアップを処理する場合に発生します。このブログでは、このエラーの原因、発生理由、およびそれを解決するための実際的な解決策を検討します。

このエラーは何を意味するのでしょうか?

「モジュール外の import ステートメントは使用できません」エラーは一目瞭然です。このエラーは、JavaScript が有効な ES モジュール外の import ステートメントに遭遇したときに発生します。JavaScript では、モジュール システムがコードの分割方法を決定します。 ES モジュール (インポート/エクスポート) と CommonJS (require/module.exports) が 2 つの主要なモジュール システムです。

JavaScript がコードを ES モジュールとして認識しない場合、このエラーがスローされます。

「モジュール外のインポートステートメントを使用できません」エラーの原因は何ですか?

これは通常、JavaScript/TypeScript がモジュール コンテキストの外側で import ステートメントに遭遇したときに発生します。これは、インポートしようとしているファイルが ES モジュールとして認識されていないことを意味します。

このエラーが発生する一般的な理由は次のとおりです:

• デフォルトで CommonJS を使用する Node.js : デフォルトでは、Node.js は ES モジュールではなく CommonJS (CJS) モジュールを使用します。これは、指定しない限り、インポート/エクスポート構文がネイティブにサポートされていないことを意味します。

• Babel/Webpack の構成が間違っています: コードをバンドルするとき、特にターゲット環境が ES モジュールをネイティブにサポートしていない場合、Babel や Webpack などのツールが ES モジュールを正しく処理するように構成されていない可能性があります。 &&&]

• "type" が見つかりません: package.json に "module": Node.js プロジェクトで ES モジュールを使用している場合は、"type" を追加して明示的に指定する必要があります: package.json.

  内の「モジュール」

• ファイル拡張子の不一致: ES モジュールに .mjs の代わりに .js を使用したり、その逆を行うと、このエラーが発生することがあります。

段階的な解決策

「モジュール外では import ステートメントを使用できません」エラーを修正するためのいくつかの解決策を次に示します:

• Node.js で ES モジュールを有効にする:

最も一般的なケースは、Node.js を使用している場合で、デフォルトでは CommonJS モジュールが使用されます。 ES モジュールを有効にするには、次の手順を実行します:

方法 1: package.json:

を変更する

{ "タイプ": "モジュール" }

{
  "type": "module"
}

package.json に "type": "module" を追加することで、すべての .js ファイルを ES モジュールとして扱うように Node.js に指示します。

方法 2: ファイルの名前を .mjs:

に変更します

package.json を変更したくない場合は、ファイルの名前を .mjs (たとえば、index.mjs) に変更して、ES モジュールであることを明示的に示すことができます。

• Babel/Webpack 構成の更新:

Babel または Webpack を使用している場合は、ES モジュールを正しく処理するように構成されていることを確認してください。 Babel の場合は、@babel/preset-modules プラグインを使用できます。 Webpack の場合は、構成で module を false に設定します。

Babel の場合: .babelrc または babel.config.json ファイルを更新します:

{ "プリセット": ["@babel/preset-modules"] }

{
  "type": "module"
}

Webpack の場合: webpack.config.js ファイルを更新します:

モジュール.エクスポート = { モジュール: { ルール: [ { テスト: /\.js$/, 除外: /node_modules/、 使用： { ローダー: 'バベルローダー', オプション: { プリセット: ['@babel/preset-env'] } } } ] } };

{
  "type": "module"
}

• インポート パスと構文を確認する:

インポート パスが正しいこと、および正しい構文を使用していることを確認してください。たとえば、相対パスは ./ または ../.

で始まる必要があります。

node_modules からモジュールをインポートする場合は、パッケージが ES モジュールをサポートしていることを確認してください。そうでない場合は、Webpack などのバンドラーを使用して処理する必要がある場合があります。

• ファイル拡張子を再確認:

ES モジュールを使用している場合は、ファイル拡張子がモジュール タイプと一致していることを確認してください。 ES モジュールには .mjs を使用し、CommonJS モジュールには .js を使用します。

.mjs: ES モジュール
.cjs: CommonJS モジュール

ES モジュールと CommonJS モジュールの違いは何ですか?

それで気になるのは、ES モジュールと CommonJS モジュールの違いは何でしょうか?そして、JavaScript にはなぜ 2 つの異なるモジュール システムがあるのでしょうか?

ESモジュール

ES モジュールは、ES6 (ES2015) で導入された公式の JavaScript モジュール システムです。 import キーワードとexport キーワードを使用して、モジュール間の依存関係を定義します。 ES モジュールは静的に分析可能です。つまり、依存関係がコンパイル時に解決されるため、コードの最適化が容易になります。

ES モジュールは非同期でロードされるため、パフォーマンスが向上し、モジュールの並列ロードが可能になります。また、名前付きエクスポート、デフォルト エクスポート、および循環依存関係もサポートします。 ES モジュールは、最新のブラウザーと Node.js (「type」: 「module」フラグ付き) で広くサポートされています。

CommonJS モジュール

CommonJS は、ES モジュールが導入される前に Node.js やその他の環境で使用されていたモジュール システムです。 CommonJS モジュールは、require 関数を使用してモジュールをインポートし、module.exports またはexports を使用して値をエクスポートします。 CommonJS モジュールは同期的に読み込まれるため、パフォーマンスの問題が発生する可能性があります。

CommonJS モジュールはブラウザーではネイティブにサポートされていませんが、Babel や Webpack などのツールを使用して ES モジュールにトランスパイルできます。 CommonJS モジュールは依然として Node.js プロジェクトで広く使用されていますが、ES モジュールはより優れたパフォーマンスと静的分析能力により人気が高まっています。

これら 2 つのモジュール システムが存在する理由は、JavaScript の進化と、より最新の標準化されたモジュール システムの必要性によるものです。 ES モジュールは JavaScript モジュールの未来ですが、CommonJS モジュールは依然として既存のプロジェクトや環境で広く使用されています。

デバッグのヒント

上記の解決策をすべて試してもまだエラーが発生する場合は、追加のデバッグのヒントをいくつか紹介します:

• Node.js バージョンの確認: ES モジュールのサポートは Node.js 12 でネイティブに導入されたため、Node.js バージョン 12.x 以降を実行していることを確認してください。古いバージョンでは、ES モジュールは動作しません。 Node.js Web サイトにアクセスしてバージョンを更新してください。

• ブラウザのサポートを確認: ブラウザ環境で作業している場合は、ブラウザが ES モジュールをサポートしていることを確認してください。最新のブラウザのほとんどは対応していますが、古いバージョンでは対応していない可能性があります。

• タイプミスをチェックする: コード内の単純なタイプミスがこのエラーの原因となる場合があります。コードにスペルミスや構文が間違っていないか再確認してください。

• TypeScript に npx tsc を使用する: TypeScript を使用していてこのエラーが発生した場合は、npx tsc を実行して TypeScript コードを JavaScript にコンパイルすると、問題の特定に役立つ可能性があります。

結論

「モジュール外で import ステートメントを使用できません」エラーは、JavaScript/TypeScript 開発者が ES モジュールを使用するときに直面する一般的な問題です。このエラーが発生する理由を理解し、このブログで提供されている段階的な解決策に従うことで、問題を迅速に解決し、モジュール化された保守可能なコードの構築を続けることができます。