Laravel 8 Livewire保存数据后关模态框报$ is not defined错误如何解决

Uncaught ReferenceError: $ is not defined 错误本质是代码中调用了jQuery的全局别名$，但jQuery未在当前页面正确加载、或加载顺序晚于你的自定义脚本。

• 方案1：调整资源加载顺序
  确保jQuery的引入标签放置在你的事件监听代码之前，Laravel项目常见的引入写法参考：

<!-- 优先引入jQuery -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<!-- 再引入Bootstrap JS以及你的自定义脚本 -->
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<!-- 你的事件监听代码放在最下方 -->
<script>
window.addEventListener('closeModel', event => {
    $("#Add_Student_Model").modal('hide');
})
</script>

如果你的项目使用Laravel Mix打包资源，需要在webpack.mix.js中配置自动加载jQuery，避免全局变量未暴露的问题：

mix.autoload({
  jquery: ['$', 'window.jQuery']
})

配置完成后重新执行npm run dev打包生效。

• 方案2：移除jQuery依赖（适合Bootstrap 5+版本）
  Bootstrap 5及以上版本本身支持原生JS操作模态框，不需要依赖jQuery，直接修改你的监听代码即可规避该错误：

window.addEventListener('closeModel', event => {
    const modalEl = document.getElementById('Add_Student_Model');
    const modalInstance = bootstrap.Modal.getInstance(modalEl);
    modalInstance.hide();
})

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