はじめに
こちらの記事は筆者の環境では開発環境ではエラーは出ませんでしたが
本番環境ではエラーが出てしまい、bootstrapのドロップダウンが動かない問題に直面しました。
もし私と同じく本番環境でエラーが出た人がいれば以下の記事を参考にしてみてください。
本番環境では動かなかった理由につきましては調査中です。
目的
Rails7で後からbootstrap5を導入しました。
その際にPopper.jsのエラーにハマったのですが無事解決でき、記事が少なかったので備忘録として投稿します。
開発環境
- rails 7.0.4.3
- ruby 3.1.2
- Bootstrap 5.3.3
- Popper.js 2.11.8
Bootstrap5導入方法
rails7で後からBootstrap5の導入をしたい方はこちらを参考にしてください。
投稿者はこの記事を参考にしてBootstrap5を導入する途中でPopper.jsのエラーにハマりました。
エラー内容
ブラウザでBootstrapのjavascriptで動く部分の動作確認をしていたら、下の写真のようなエラーに遭遇しました。
エラー名：Popper__namespace.createPopper is not a function
解決方法
結論:importmap.rbにpin止めしたCDNのリンクを変更したらエラーがなくなった。
最初のimportmap.rbにはbootstrap5導入の参考記事通りのCDNを参照するリンクを記載していました。
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.8/dist/esm/index.js"
それから色々調べている内にこのCDNのリンクを下のようにすると動くという記事を見かけたので試みました。
pin "@popperjs/core", to: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/esm/popper.min.js"
しかし、これでもエラーが直らず、、、
心が折れかけていたのですが、よくよく考えてみると「Popperという関数はないよ」というエラー内容なので、もしかしたらPopper.js自体読み込まれてないのではないかと思い、CDNのリンクを疑いました。
そこでcdbjsというサイトを訪問してみたら、CDNのリンクがずらりとあったのでその中の一つをコピペしたらうまく行きました。
pin "@popperjs/core", to: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
投稿者の動作環境では上のリンクで上手く行きましたが、人によっては違うリンクで成功するかもしれないので色々試して見てください。
また間違いや補足説明があればコメントいただけると嬉しいです。