rails チュートリアルでブラウザ側にて

Uncaught Error: Cannot find module 'bootstrap'エラーがずっと残って消えませんでした。

事象として、

スクリーンショット 2021-03-12 17.44.52.png

ブラウザの検証ツールで上記画像のようなエラー

Uncaught Error: Cannot find module 'bootstrap'
    at webpackMissingModule (application.js:2)
    at Module../app/javascript/packs/application.js (application.js:2)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

スクリーンショット 2021-03-12 17.45.07.png

本来ヘッダーのAccount欄がクリックするとドロップダウンメニューが出てくるはずなのだが出てこない

ちなみにテストは全てパスしているが、サーバー側でもエラー表示がされている

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'bootstrap' in '/Users/kiyomasa/environment/sample_app/app/javascript/packs'
 @ ./app/javascript/packs/application.js 11:0-19

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'jquery' in '/Users/kiyomasa/environment/sample_app/app/javascript/packs'
 @ ./app/javascript/packs/application.js 9:0-17

ERROR in ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js
Module not found: Error: Can't resolve 'jquery/src/jquery' in '/Users/kiyomasa/environment/sample_app/node_modules/@rails/ujs/lib/assets/compiled'
 @ ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 1:0-28
 @ ./app/javascript/packs/application.js

結論

結論、jQueryとBootstrapのJavaScriptライブラリを、アプリケーションにインストールできていませんでした。

$ yarn add jquery@3.4.1 bootstrap@3.4.1

を実行したらエラーが消え、ドロップダウンメニューが正常に動きました。
もう少し、知りたい方はrailsチュートリアル　8章を覗いてみてください。

3日ぐらい調べまくりましたが、簡単な話でした。。。

調べてやってみたこと

そもそも原因が不明で、対象のコードを調べてもrequiereしか書いておらず、何かした記憶もない

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
// import "bootstrap"
require('bootstrap/dist/js/bootstrap.min.js')

このコードをいろいろ調べてみるとwebpakerの問題かとも思い、上記のように少し変更したりしてみたが、うんともすんとも言わず。。

https://qiita.com/Furuta03/items/6d1ed07fbcd897a80e80
こちらのページも参考にしたが、どうやら違う模様

bootstrapの公式
https://getbootstrap.jp/docs/5.0/getting-started/webpack/
公式を参考に以下記述を試してみた

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"
// require('bootstrap/dist/js/bootstrap.min.js')

#追加
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

サーバーを再起動してもエラー内容は変わらなかった。

結果

3日ぐらい、webpackerについて調べたり、いろいろ探してようやく解決に至った。

rails チュートリアル8章を見直して、
結論、jQueryとBootstrapのJavaScriptライブラリを、アプリケーションにインストールできていませんでした。

$ yarn add jquery@3.4.1 bootstrap@3.4.1

を実行したらエラーが消え、ドロップダウンメニューが正常に動きました。

※rails チュートリアル8章　8.2.3

Bootstrapのドロップダウンメニュー機能をレウアウトに追加したものの、(dropdownクラスやdropdown-menuなど)ドロップダウン機能を有効にするため、JavaScriptライブラリ,jQueryを読み込めていませんでした。

上記のコマンドはyarnでJavaScriptをインクルードするためのコマンドです。

3日ぐらいかかりました。。。簡単な話、コマンドを実行せずよっみ飛ばしてしまっていただけでした。

誰かの役に立てれば幸いです。。。

Rails でUncaught Error: Cannot find module 'bootstrap'とブラウザ側でエラーになった際の対処法

結論

調べてやってみたこと

結果