Laravel11+Vite环境下jQuery依赖模块（tablesorter）加载失败求助

当前报错jQuery(...).tablesorter is not a function的核心原因是模块作用域隔离：

• 全局通过<script>引入的jQuery，与Vite打包的app.js模块环境相互隔离。tablesorter在Vite模块内导入时，会绑定到模块内的jQuery实例，而非全局的window.jQuery。
• 此前将jQuery移到app.js时，未正确暴露全局变量，导致jQueryUI这类依赖全局jQuery的插件找不到目标对象。

步骤1：移除全局jQuery引入，统一由Vite管理依赖 #

删除布局文件head区域的jQuery引入代码：

<!-- 移除以下代码 -->
<script type="text/javascript" src="{{ asset('assets/jquery/jquery.min.js') }}"></script>
<script type="text/javascript">
    window.jQuery = window.$;
</script>

步骤2：在app.js中正确导入并暴露全局jQuery #

修改resources/js/app.js，先导入jQuery并挂载到全局，再加载依赖插件：

import Alpine from 'alpinejs';
import $ from 'jquery';

// 将jQuery暴露到全局，供所有脚本访问
window.jQuery = window.$ = $;

window.Alpine = Alpine;
Alpine.start();

// 插件会自动绑定到全局的jQuery实例
import 'jquery-datetimepicker';
import 'tablesorter/dist/css/theme.dropbox.min.css';
import 'tablesorter/dist/js/jquery.tablesorter.combined.min.js';

步骤3：调整视图中的脚本调用方式 #

将视图中@push('scripts')里的脚本改为普通类型（避免模块作用域隔离）：

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", () => {
        $("#users-table").tablesorter({
            // 你的配置参数
        });
    });
</script>
@endpush

步骤4：确认加载顺序 #

确保布局文件中@stack('scripts')在@vite(...)之后，保证插件加载完成后再执行调用脚本：

<!-- 布局文件</body>标签前的顺序 -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('scripts')
</body>

1. 所有依赖在Vite模块环境中统一加载，保证jQuery实例唯一，插件能正确绑定到同一个jQuery对象。
2. 显式将jQuery挂载到window，解决了jQueryUI等依赖全局变量的插件找不到jQuery的问题。
3. 调用脚本放在Vite打包脚本之后，确保执行时jQuery和tablesorter已完成加载。

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