【解決】「can only be default-imported using the 'allowSyntheticDefaultImports' flag」が発生する

このエラーメッセージは、ES6のモジュール機能を使って、モジュールの一部としてインポートされたJavaScriptファイルに関するものです。エラーメッセージは、インポートされたファイルがデフォルトエクスポートを持たず、代わりに名前付きエクスポートを持っている場合に表示されます。

このエラーを解決するには、2つの方法があります。

allowSyntheticDefaultImportsフラグを使用する

TypeScriptコンパイラに、allowSyntheticDefaultImportsフラグを使用するよう指示することができます。このフラグは、TypeScript 1.8以降で利用可能です。このフラグを使用すると、名前付きエクスポートをデフォルトエクスポートとして使用できます。

以下のように、tsconfig.jsonファイルにallowSyntheticDefaultImportsを追加します。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

モジュールのインポート方法を変更する

もう一つの解決方法は、インポート方法を変更することです。インポート先のファイルがデフォルトエクスポートを持たず、名前付きエクスポートを持っている場合、以下のように修正してください。

import * as myModule from './myModule'; // 名前付きエクスポートを使用する場合

または、以下のようにデフォルトエクスポートを行っているファイルを修正してください。

export { myFunction as default } from './myModule'; // myFunctionは名前付きエクスポート

以上のいずれかの方法で、"can only be default-imported using the 'allowSyntheticDefaultImports' flag"エラーを解決できます。