エラーの発生
rails7を使っていると、ブラウザにて以下のエラーが発生した。身に覚えがない。
An import map is added after module script load was triggered.
Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".
importmapが読み込めていないらしい。
だがimportmapに手は加えておらず、viewのjavascript_importmap_tagsを設置する位置をheadタグの一番上に変えたりもしたが効果なし。
調べてもそれらしきものは見当たらず、結果として数時間かけてなんとか解決法できたので備忘録も兼ねて書き残す。
試したこと
importmapについて色々調べたが、それらしい情報がない。
が、よくよく見てみればエラーは常に出ているわけではなかった。
- ルートページでのみ発生
- リロード時のみ発生。他ページからの遷移では起こらず
ということだったので、ルーティングかビューが問題なのだろうと推測。
試しにindex.html.erbをまっさらにしてみたところ、エラー起こらず！
だんだんと探索個所を絞ることで原因を特定できた。
原因
やっぱりimportmapは何も問題なかった。原因は「javascript_include_tag」。
importmapとjavascript_include_tagが競合したためだろう。
ルートページのみ個別にjsを読み込みたかったので使ってみたのだ。
importmapを使っているのに、よくわからず調べて出てきたものをそのまま使ったがよくなかった。
ネットの情報はrails7より前のものも多くあるため、分からずにコピペで使うのは危険！という話。
解決法
javascript_import_module_tagを使用する。
使用方法は以下の記事が分かりやすかった。
まとめ
分からないものを分からないまま使うのは、やめよう！ はい。
調べたかが悪かったのかもしれないというのはさておき、こういうのを残せば後々同じミスした人が出たときに見つけられるのかな～と思ったり。
おまけ
- リロード時のみ発生。他ページからの遷移では起こらず
ちなみになんで他ページからの遷移では起こらなかったかというと、別ページを開いた際にimportmapが読み込まれ、turboが動き出したためだった。
つまりは特に本件に関りはないが、これが手がかりだ！といろいろ考えてたのは内緒。