bootstrapのdropdownが動かない

bootstrapのdropdownが動きません。投げやりで恐縮ですが、どの辺りがボトルネックとなっていそうでしょうか。
@popperjs/coreについてはnpmではなくyarn導入しました。

bootstrapはwebpacker(yarn)で、同時にpopper.js(v2)、jqueryをインストールしました。
#popper.js(v2)をnpmで導入し直してみましたが結果は同じでした。
gemは導入していません。

何かご示唆頂けると助かります。
<_header.html.erb>


,,,

          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown button
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><%= link_to "サインアウト", destroy_user_session_path, class: "nav-link", method: :delete %></li>
          </div>
      </div>
          
        </ul>
      </li>
    </ul>
  </nav>
</header>

<application.js>

import 'bootstrap';
import '../stylesheets/application';
import '@fortawesome/fontawesome-free/js/all';
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

<application.scss>

@import '~bootstrap/scss/bootstrap';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

@import "custom";

<package.json>

{
  "name": "Board",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^5.0.0",
    "jquery": "^3.6.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

m.ts10806

2021/05/08 21:20

手元でさっと試せないので、可能性部分で・Bootstrap5にはjQuery不要（なくてもいいという意味で他にjQueryプラグイン利用するなら必要）・Popperも込みのbundleのほうを入れてみてはどうか・ひとまずBootstrapもGem通すのではなくCDNのほうで試してみてはどうか

KUBO10

2021/05/09 00:13 編集

コメントありがとうございます。以下試してみました。・Bootstrap5にはjQuery不要　　-> 削除しました・Popperも込みのbundleの〜　　-> popperをgemで導入するということでしょうか？・ひとまずBootstrapもGem通す〜 -> CDNのほうではしっかり動きます。元々gemは使っていません。

m.ts10806

2021/05/09 02:57

popper.jsを含んだbootstrap.jsがbootstrap.bundle.jsとして提供されています。