bootstrap5 tagsinput 導入時、開発者ツール欄にエラーメッセージが表示され、tagsinputが動作しない。

実現したいこと

• rails6.1.7 docker, docker-compose, webpacker使用環境でbootstrap5 tagsinputを導入したい。そのために以下記載のエラーを克服したい。

前提

初学者のため、内容に過不足がある可能性がありますが、お読み頂けたら幸いです。

cocoonというgemを使い、タグ機能を実装しました。
見栄えを良くするためにタグ機能に対してbootstrap拡張機能であるtags inputを導入しようとしています。

■実行した手順

1. yarn add bootstrap5-tagsinput
2. app/javascript/packs/application.jsへ以下を記述。

発生している問題・エラーメッセージ

開発者ツールを確認すると以下のようなエラーが出るようになりました。

tagsinput.js:521 Uncaught TypeError: Cannot read properties of undefined (reading 'fn') at tagsinput.js:521:1 at ./node_modules/bootstrap5-tagsinput/tagsinput.js (tagsinput.js:643:1) at __webpack_require__ (bootstrap:19:1) at ./app/javascript/packs/application.js (application.js:1:1) at __webpack_require__ (bootstrap:19:1) at 1 (log.js:48:1) at __webpack_require__ (bootstrap:19:1) at bootstrap:83:1 at bootstrap:83:1

該当のソースコード

app/javascript/packs/application.js

1import jQuery from 'jquery'; 2window.jQuery = jQuery; 3window.$ = jQuery; 4import Rails from "@rails/ujs" 5import Turbolinks from "turbolinks" 6import * as ActiveStorage from "@rails/activestorage" 7import "channels" 8import "bootstrap" 9 10//require('jquery') 11require("@nathanvda/cocoon") 12 13Rails.start() 14Turbolinks.start() 15ActiveStorage.start() 16 17import '../src/cocoon_post_limit'; 18import '../src/ihave_posts_new'; 19import './application.scss'; 20import 'bootstrap5-tagsinput/tagsinput.js'; ここを追記

試したこと

1. jQueryの読み込み位置

調べてみたところ、jQueryの記述位置により同様のエラーが発生するとの記事を見たため、application.jsの最上部にjQueryのimport文を記述してみたのですが同様にエラーが発生しました。

1. import 'bootstrap5-tagsinput/tagsinput.js';のコメントアウト

application.jsの最後尾に、今回追記したimport文があります。この部分を
コメントアウトすると、エラーの発生は無くなりました。

お手数なのですが、解決方法についてご教示頂けたら幸いです。