このエラーメッセージは、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"エラーを解決できます。