webpackerを使用してBootstrapを導入する際に出たエラーの解決方法。

##起こったエラー

こちらのサイトを参考にyarmでbootstrapとjqueryとpopperをインストールして進めていたが、bootstrapを適用できなかった。

$ yarn add jquery bootstrap popper.js

サーバーを見てみると、以下のようなメッセージが出ていた。

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js
Module not found: Error: Can't resolve '@popperjs/core' in '/Users/XXX/XXX/XXXX/node_modules/bootstrap/dist/js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.esm.js 60:0-41 2278:19-25 2297:23-42 3969:15-21 4099:23-42
 @ ./app/javascript/packs/application.js```

@popperjs/coreが見つからないと言われているが、参考サイトではインストールする手順はなかったし、なぜこのようなメッセージが出ているのか分からなかった。

##原因
参考サイトの時点では、Bootstrap4が最新版だったが、Bootstrap5がリリースされたことにより、Bootstrapをインストールした際にBootstrap5がインストールされていた。
それによって起こった環境のずれが原因だったようだ。

##解決策

popperを$ yarn add popper.jsでインストールしていたが、
$ yarn add @popperjs/coreでインストールすれば良いことが分かった。

$ yarn add jquery bootstrap @popperjs/core

##参考サイト
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）