どうすればいいか
ケバブケースの名前をキャメルケースに書き換える。
例:
moment-duration-formatというモジュール名なら
import momentDurationFormat from 'moment-duration-format'
と書く。
何がしたかったのか
Webpackを使ってJavaScriptをクライアントサイドで実行している環境で、moment-duration-formatという、時間(期間)の表示を簡単にするライブラリ(Nodeモジュール)を導入したかった。
webpackを使っているので、ES Moduleスタイルで
import moment-duration-format from 'import-duration-format'
と書いた。
どんな問題が起きたか
moment-duration-formatは時間を扱うライブラリであるmomentを拡張するライブラリであるためimport部は以下のようになるが
import moment 'import-duration-format'
import moment-duration-format from 'import-duration-format'
javascriptでは-
が算術演算子として予約済みなせいか、moment
が一つのシンボルとして認識されてしまう。
なぜかVSCodeの画面では import ... =' can only be used in a .ts file.
というエラーメッセージとなっている。
ブラウザ上のJavaScriptコンソールではModule parse failed: Identifier 'moment' has already been declared
と上の行でmoment本体をimportしていることと関連したエラーメッセージとなっていた。
なおmomentのimportをコメントアウトした場合のエラーメッセージとしては Module parse failed: Unexpected token
となり、import文の途中で算術演算子が登場することを怒られるようだ。