Laravel5.6 | Bootstrap4 | navbar でドロップダウンが反応しない

Laravel5.6でWebアプリケーションを作っております。

ちょこちょこハマることがあった(というか学びながらなのでつっかかるのは仕方ないよね、というコトにしておこう)ので、随時メモ。

今回は、Bootstrapのnavbarで、「見た目はきちんと見えてるけど、ドロップダウンのメニューをクリックしても展開してくれない」というもの。

結論から言うと、フッタに入れてたこの3行(jquery, popper, bootstrap の javascriptファイルを読み込む部分)が不要でした。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=(略)></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity=(略)</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity=(略)></script>

 

同様の「動かん!」という問い合わせは stackoverflow 英語サイトでもいくつか出ていたのだけれど、「popper.jp 入れ忘れてない?」「読み込みの順番も大切っすよ?」みたいなのが多くて、試してみても解決せず…。

「フッタにちゃんと入れてますけど?」と思ってたら、ヘッダ部分で

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

 

ってのがあって、この app.js で必要なもの全部読み込んでました・・。フッタで二重に読み込んだら、そら動きませんわね。

chrome のデベロッパーツールで動きを見たりもしてたんだけど、全然気付きませんでした。ちぇ。