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

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

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

事象として、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037238/cc3b391f-8e08-23d5-09f7-863d727b92ba.png)
スクリーンショット 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
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037238/5f4b0273-822b-245f-2d19-b68a2875d365.png)
スクリーンショット 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日ぐらいかかりました。。。簡単な話、コマンドを実行せずよっみ飛ばしてしまっていただけでした。


https://teratail.com/questions/326408?reply=true

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