3
Help us understand the problem. What are the problem?

posted at

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強者ががっつりセットアップしてみた(翻訳)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?