【Laravel6】jQueryを使うと「Uncaught ReferenceError: $ is not defined」というエラーが出るときの対処法

2020年5月24日Laravel

Laravelでblade内や、jaファイルでjQueryの構文を書くと、以下のようなエラーが出ることがある。

Uncaught ReferenceError: $ is not defined

例えば

[resources/views/layouts/app.blade.php]

// 省略
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <script>
        $('#example').on('click', function (event) {
          // 適当な処理
    });
    </script>
</body>
</html>

こんな感じでjQueryで書くと上のようなエラーになる。

原因は[resources/views/layouts/app.blade.php]内の上の方に書かれている

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

のdeferです。

app.jsでjqueryのライブラリの読み込み処理が入っているのですが、deferがあると遅延して読み込まれるので、ライブラリが読み込まれる前にjQueryの構文が実行されることが原因です。

deferを削除しても良いのですが、app.jsの容量が大きくなった時に何かしら不都合が起きる可能性があるため、

jQuery構文を実行するのをページのDOMが表示された後にすることによって解決します。

window.addEventListener('DOMContentLoaded’, function () { // ここに処理を記述 });

先ほどのは以下のようにします。

[resources/views/layouts/app.blade.php]

// 省略
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
                $('#example').on('click', function (event) {
                  // 適当な処理
            });
        });
    </script>
</body>
</html>