TypeScriptで「This module is declared with ‘export =’, and can only be used with a default import when using the ‘allowSyntheticDefaultImports’ flag.」
今回はTypeScriptを使ってソースコードを記述しているときに下記のエラーが起きたときの対処法についてご説明いたします。
|
1 2 |
Module '"/Users/test/node_modules/@types/sortablejs/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259) index.d.ts(20, 1): This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. |
Contents
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として記述しましょう。
|
1 2 3 4 5 |
{ "compilerOptions": { "allowSyntheticDefaultImports": true } } |
その後は次のようにデフォルトインポートが可能です。
|
1 |
import Sortable from 'sortablejs'; |
2.名前付きインポートを使用する
tsconfig.jsonを変更せずに修正することも可能です。
名前付きインポートを使用するようにしましょう。
sortablejsのSortableをインポートする例は下記となります。
|
1 |
import * as Sortable from 'sortablejs'; |
終わりに
今回はTypeScriptを使ってソースコードを記述しているときに冒頭のエラーが起きたときの対処法についてご説明いたしました。