RailsでUncaught Error: Cannot find module 'bootstrap'となり、j Queryが読み込めない

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

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

事象として、

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

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

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

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

サーバー側のメッセージ(rails server)

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

該当のコード

application.js
1
2require("@rails/ujs").start()
3require("turbolinks").start()
4require("@rails/activestorage").start()
5require("channels")
6require("jquery")
7import "bootstrap"

##調べてやってみたこと

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

app/javascript/packs/application.js
1require("@rails/ujs").start()
2require("turbolinks").start()
3require("@rails/activestorage").start()
4require("channels")
5require("jquery")
6// import "bootstrap"
7require('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
1require("@rails/ujs").start()
2require("turbolinks").start()
3require("@rails/activestorage").start()
4require("channels")
5require("jquery")
6import "bootstrap"
7// require('bootstrap/dist/js/bootstrap.min.js')
8
9#追加
10// You can specify which plugins you need
11import { Tooltip, Toast, Popover } from 'bootstrap';
12import 'bootstrap/dist/css/bootstrap.min.css';

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

###環境
ローカル環境

rails -v
Rails 6.0.3
ruby -v
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin19]

お知恵をいただけると幸いです。

##追記

この状態でherokuへデプロイしようとすると

ModuleNotFoundError: Module not found: Error: Can't resolve 'jquery' in '/tmp/build_24e51728/app/javascript/packs'

という記載があり、いろいろ調べてみたところ、webpackの問題かもしれません

と言ってもこのファイルがどこにあるかも見つからず、、

webpackについてはこちらで調べましたが、原因はわかりませんでした。

###追記2

フロント側のヘッダーのコードも調べましたが、問題ない感じでした

bootstrapとコードが違うのかと思い、bootstrap側の実装例も確認しましたが、相違ない模様でした。

検証側からリンクをクリックすると飛べますし、あくまでフロントでbootstrapが読み込めていないようです。

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title><%= full_title(yield(:title)) %></title>
5    <%= render 'layouts/rails_default' %>
6    <%= render 'layouts/shim' %>
7  </head>
8  <body>
9    <%= render 'layouts/header' %>
10    <div class="container">
11      <% flash.each do |message_type, message| %>
12        <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
13      <% end %>
14      <%= yield %>
15      <%= render 'layouts/footer' %>
16      <%= debug(params) if Rails.env.development? %>
17    </div>
18  </body>
19</html>

_rails_default.html.erb
1<%= csrf_meta_tags %>
2<%= csp_meta_tag %>
3<%= stylesheet_link_tag    'application', media: 'all',
4                           'data-turbolinks-track': 'reload' %>
5<%= javascript_pack_tag 'application',
6                           'data-turbolinks-track': 'reload' %>