【React】error : can only be default-imported using the ‘esmoduleinterop’ flagの解決方法

投稿日:2024/09/29　最終更新日:2024/09/29

Table of Contents

エラー内容

TypeScriptでCommonJSモジュールをインポートしようとすると、エラーが発生することがありますが、このようなエラーはESモジュールとCommonJSモジュールの互換性の問題が原因です。

また、CommonJS モジュールが ESモジュールと異なる形式でデフォルトエクスポートを持つことがあるため、TypeScript が ESモジュールとして扱う場合に互換性がない事が多いです。

つまり、CommonJSモジュールはdefaultプロパティを持たず、ESモジュールのように直接インポートできないため、このエラーが表示されたということです。

tsconfig.jsonに下記コードを追加します。

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

これでエラーは解消されるかと思います。