TypeScriptで「This module is declared with ‘export =’, and can only be used with a default import when using the ‘allowSyntheticDefaultImports’ flag.」

今回はTypeScriptを使ってソースコードを記述しているときに下記のエラーが起きたときの対処法についてご説明いたします。



TypeScriptで「This module is declared with 'export =’, and can only be used with a default import when using the 'allowSyntheticDefaultImports’ flag.」

結論から言うとTypeScriptの「export = 」の構文を使用しているものをインポートするためにはTypeScriptのコンパイラオプションである「allowSyntheticDefaultImports」を有効にする必要があります。

解決策は次の二つあります。
1.tsconfig.jsonのallowSyntheticDefaultImportsフラグを有効にする
2.名前付きインポートを使用する

1.tsconfig.jsonのallowSyntheticDefaultImportsフラグを有効にする

例としてtsconfig.jsonにallowSyntheticDefaultImportsをtrueとして記述しましょう。

その後は次のようにデフォルトインポートが可能です。

2.名前付きインポートを使用する

tsconfig.jsonを変更せずに修正することも可能です。

名前付きインポートを使用するようにしましょう。
sortablejsのSortableをインポートする例は下記となります。

終わりに

今回はTypeScriptを使ってソースコードを記述しているときに冒頭のエラーが起きたときの対処法についてご説明いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






TypeScript

Posted by ちこ