TypeScript で Node.js モジュールを読み込む際のエラー「This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag」の原因と解決策

2024-05-16

TypeScriptにおける「esModuleInterop」フラグとデフォルトインポート

このエラーメッセージは、TypeScriptでNode.jsのモジュールを読み込む際に発生します。これは、モジュールが export = 構文を使用してデフォルトエクスポートされている場合に発生します。しかし、TypeScriptはデフォルトエクスポートを異なる構文で処理するため、互換性の問題が発生します。

解決策

この問題を解決するには、TypeScriptコンパイラで esModuleInterop フラグを有効にする必要があります。このフラグは、TypeScriptがCommonJSモジュールとES Modulesの相互運用性を向上させるためのものです。

具体的な手順

tsconfig.json ファイルを開きます。
compilerOptions プロパティに esModuleInterop オプションを追加します。以下のようになります。

{
  "compilerOptions": {
    "esModuleInterop": true,
    // ...その他のオプション
  }
}

ファイルを保存して、TypeScriptコンパイラを再起動します。

補足

esModuleInterop フラグを有効にすると、パフォーマンスがわずかに低下する可能性があります。
このフラグは、すべてのプロジェクトで必要ではありません。デフォルトエクスポートを使用していないモジュールのみを使用している場合は、このフラグを有効にする必要はありません。

// ファイル名: index.ts

// モジュールをデフォルトインポートする
import greet from './greet';

// デフォルトエクスポートを使用する
console.log(greet('TypeScript'));

// ファイル名: greet.ts

// デフォルトエクスポートを定義する
export default function greet(name: string): string {
  return `こんにちは、${name}さん！`;
}

このコードを実行すると、次の出力がコンソールに表示されます。

こんにちは、TypeScriptさん！

この例は、esModuleInterop フラグを使用して、TypeScriptでNode.jsのモジュールをデフォルトインポートする方法を示しています。

TypeScript でデフォルトエクスポートをインポートするその他の方法

名前空間インポートを使用すると、デフォルトエクスポートを含むモジュールのすべてのメンバーにアクセスできます。構文は以下の通りです。

import * as moduleName from 'module-path';

この場合、moduleName 変数にはモジュールのすべてのメンバーが格納されます。デフォルトエクスポートにアクセスするには、以下のいずれかの方法を使用できます。

moduleName.default プロパティを使用する
moduleName 変数をそのまま使用する (デフォルトエクスポートがモジュールの最初のメンバーである場合)

例：

import * as greetModule from './greet';

console.log(greetModule.default('TypeScript')); // greetModule.default を使用
console.log(greetModule('JavaScript'));       // greetModule をそのまま使用 (デフォルトエクスポートが先頭にある場合)

個別メンバーのインポート

デフォルトエクスポートに加えて、個別のメンバーも同時にインポートしたい場合は、以下の構文を使用できます。

import defaultExport, { namedMember1, namedMember2 } from 'module-path';

この場合、defaultExport 変数にはデフォルトエクスポートが格納され、namedMember1 と namedMember2 変数にはそれぞれ対応する名前付きメンバーが格納されます。

import greet, { farewell } from './greet';

console.log(greet('TypeScript'));
console.log(farewell('JavaScript'));

動的インポートを使用すると、実行時にモジュールをインポートできます。この方法は、非同期処理や条件付きインポートに役立ちます。構文は以下の通りです。

import('./module-path')
  .then(module => {
    const defaultExport = module.default;
    // ... defaultExport を使用する
  })
  .catch(error => {
    console.error(error);
  });

この例では、module-path モジュールが非同期にインポートされ、defaultExport 変数にデフォルトエクスポートが格納されます。

注意事項