株式会社カサレアル BSブログ

はじめに

Viteでビルドしたapp.js内でwindowオブジェクトに値を設定しても何故か参照できずエラーになってしまいました。

app.js

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

app.jsの参照箇所

@vite(['resources/js/app.js'])
<script>
    console.log($.fn.jquery);
</script>

エラー内容

Uncaught ReferenceError: $ is not defined

解決するまでに時間が掛かったので、対応内容を共有したいと思います。

環境

• Laravel v10.24.0
• Vite v4.4.9

対応内容

scriptタグにtype=”module”を追加したら解決しました。

app.jsの参照箇所

@vite(['resources/js/app.js'])
<script type="module">
    console.log($.fn.jquery);
</script>

type=”module”の有無でJSの実行タイミングが変わるため、エラーになっていたようです。
※@Viteで生成されるscirptタグはデフォルトでtype=”module”が付与される。
※type=”module”が無いscriptタグのJSが先に実行されるため、結果的にapp.jsの実行前に$を参照する挙動になり、エラーとなっていた。

[参考サイト]
HTML Standard 4.12.1 The script element

おわりに

scriptタグのtype=”module”の有無でJSの実行タイミングが変わるとは知らなかったので、勉強になりました。
本記事が同じ現象に遭遇した方の参考になれば幸いです。

Tweet

Check