jquery must be included before bootstrap's javascript.

私が個人で受けているアプリのUIコーディングのお仕事。

クライアントがbootstrapを使用しているのですが、
今回頂いた雛形では、今まで機能していたアコーディオンが機能しなくなっていました。

事の発端

モバイル機器で使用するアプリなので、デベロッパーツールで画面を縮めて作業していました。

デベロッパーツールではたまたまconsoleタブを開いていたので、
「何かしらエラーが出ているなぁ。」程度に思っていたのですが、
作業を進めていると、アコーディオンが開かないという事象に出くわしました。

前回までの依頼ではそんな事は起こっていなかったのに。

bootstrapを使用している時点で大体のあたりはついていたのですが、
自分の粗相かもしれないので調べてみることに。

原因

ブログ記事のタイトルで盛大にネタバレしているんですが、
「jquery must be included before bootstrap's javascript.jquery must be included before bootstrap's javascript.」というエラーが原因でした。

エラー全文

コンソールで出ていたエラー全文は以下の通り。

util.js:179 uncaught typeerror: bootstrap's javascript requires jquery. jquery must be included before bootstrap's javascript.

本当はこのエラー文の後にもゴチャゴチャどこがおかしいか表示されているのですが、
メインのエラーメッセージは上の通りです。

要約...というか、翻訳すると、
「jQueryはBootstrapのJavaScriptの前に組み込む必要があります。」という内容。

該当のコードは以下の通り。

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

※integrity属性は端折ってます。

重要なのは、
赤文字のjqueryのソースがbootstrapのソースより後に書かれていることです。
これが原因でした。

以下のように順番を入れ替えて改善しました。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

原理

原理というほどでも無いかもしれないですが、
コードは基本的に「上から下」に順番に読み込まれていきます。

意外と、読み込む順番を返るだけで解決する事例も少なくはないです。
多くもないですが

今回の場合はエラー内容の通り、
bootstrapよりも先にjqueryを読み込まないといけなかったということですね。

余談

後に分かったことですが、
「jquery must be included before bootstrap's javascript.」というエラーは有名らしいです。

フロントエンドエンジニア達のつまずきポイントあるあるなんでしょうね。

私の粗相が原因だと思って調べましたが、今回はクライアントから送られてきた雛形ですでに入れ替わっていました。
今までは正しく記述されていたのに、どこで入れ替わったのか...