Laravel 10项目引入jQuery插件报“jQuery is not defined”错误求助

问题原因 #

Vite采用ES模块系统，你在app.js中挂载到window的jQuery，模块脚本的执行时机和普通<script>标签不同。直接引入的插件脚本可能在jQuery全局变量还未被挂载时就执行，导致报错。另外部分插件会检查全局的jQuery变量而非$，若只挂载$也会触发错误。

解决方案 #

方案1：通过Vite统一管理插件（推荐）

将jQuery插件纳入Vite的模块体系，确保依赖加载顺序正确：

1. 把插件文件移动到resources/js/vendor目录下（比如resources/js/vendor/tablesorter/js/jquery.tablesorter.js）
2. 修改app.js，先挂载完整的全局jQuery变量，再导入插件：

import './bootstrap';

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

import jQuery from 'jquery';
// 同时挂载$和jQuery到全局，兼容不同插件的写法
window.$ = window.jQuery = jQuery;

// 导入插件
import './vendor/tablesorter/js/jquery.tablesorter.js';

3. 移除Blade中直接引入插件的<script>标签，依赖Vite自动打包加载。

方案2：调整外部脚本的加载时机

如果坚持使用外部<script>标签引入插件，需确保插件在jQuery全局变量就绪后执行：

1. 修改app.js，确保同时挂载jQuery变量：

import './bootstrap';

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

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

2. 在Blade中，将插件脚本放在@vite指令之后，并添加defer属性：

@vite(['resources/css/app.css', 'resources/js/app.js'])
<script defer type="text/javascript" src="/jsvendor/tablesorter/js/jquery.tablesorter.js"></script>

defer会让脚本在DOM加载完成后、DOMContentLoaded事件触发前执行，且保证在Vite模块脚本之后运行。

方案3：动态加载插件脚本

通过模块脚本动态创建插件标签，确保jQuery就绪后再加载：

<script type="module">
    import './bootstrap';
    import Alpine from 'alpinejs';
    window.Alpine = Alpine;
    Alpine.start();

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

    // 动态加载插件
    const pluginScript = document.createElement('script');
    pluginScript.src = '/jsvendor/tablesorter/js/jquery.tablesorter.js';
    pluginScript.type = 'text/javascript';
    document.body.appendChild(pluginScript);
</script>

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