できない.dev

TypeScript で「can only be default-imported using the esModuleInterop flag」(TS1259) が消えない

CommonJS モジュールを default import で読むには esModuleInterop が要る。
tsconfig で esModuleInterop を true にするか、import * as 形式へ書き換える。

公開:

要約

Module '"express"' can only be default-imported using the 'esModuleInterop' flag(TS1259)は、CommonJS で書かれたモジュールを import express from 'express' の default import で読もうとしたときに出る。

CommonJS には ES Modules の default export が無いため、TypeScript は互換のための shim を挟む esModuleInterop を要求する。
tsconfig でこのフラグを立てるか、import * as 形式に書き換えれば解消する。

よくある原因

  1. CommonJS パッケージ: express や旧来の Node 向けライブラリは CommonJS で default export を持たない。
  2. フラグ未設定: esModuleInterop が false のまま default import を書いている。
  3. allowSyntheticDefaultImports だけ有効: 型エラーは消えても実行時の相互運用は担保されない。

解決策

1. esModuleInterop を有効化する

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "commonjs"
  }
}

これが推奨。
CommonJS/ESM の相互運用が正しく処理され、default import と namespace import の両方が期待通りに動く。

2. namespace import に書き換える

import * as express from 'express';
 
const app = express();

フラグを変えたくない場合は、default import をやめて namespace import にする。

3. 影響範囲を確認する

esModuleInterop を true にすると allowSyntheticDefaultImports も暗黙で有効になる。
既存の import * as 表記は動き続けるので、通常はフラグ有効化が最も影響が小さい。

この記事は役立ちましたか?