Laravel 9.20+Vite环境引入jQuery报错：$ is not defined

问题根源 #

Vite采用ES模块异步加载资源，你在Blade模板里直接编写的$("#alertbox").alert("test");会在Vite加载完成app.js之前执行，此时window.$还未挂载到全局，因此触发未定义错误。

解决方案 #

方案1：将测试代码移至app.js #

把jQuery调用代码放到app.js末尾，确保在jQuery挂载到全局后执行：

import './bootstrap';

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

import '../sass/app.scss';

// 测试代码
$("#alertbox").alert("test");

方案2：在Blade中监听DOM加载完成 #

通过DOMContentLoaded事件确保DOM和Vite资源都加载完成后再执行代码：

@vite(['resources/js/app.js'])
<script>
document.addEventListener('DOMContentLoaded', function() {
    $("#alertbox").alert("test");
});
</script>

方案3：监听Vite资源加载完成事件 #

利用Laravel Vite插件提供的vite:loaded事件，确保Vite资源加载完成后执行代码：

@vite(['resources/js/app.js'])
<script>
window.addEventListener('vite:loaded', function() {
    $("#alertbox").alert("test");
});
</script>

额外说明 #

你尝试的两种jQuery导入方式都是有效的：

• import $ from "jquery";
• import * as $ from "jquery";
  问题核心并非导入方式，而是代码执行时机的先后顺序。

内容的提问来源于stack exchange，提问作者Johan Nes