Laravel使用jQuery Steps插件报错：Uncaught ReferenceError: jQuery is not defined

问题情况 #

已通过 NPM 安装 jQuery 和 jQuery Steps，相关代码配置如下：

resources/js/app.js 代码 #

import './bootstrap';

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

window.jQuery = jQuery


import 'jquery-steps/build/jquery.steps.min.js';

视图 Blade 代码 #

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

<script type="module">
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
 </script>

报错信息 #

Uncaught ReferenceError: jQuery is not defined
at app-0acac567.js:23:13949

解决方法 #

原因分析 #

1. Vite 环境下，<script type="module"> 会创建独立作用域，无法直接访问挂载在 window 上的全局变量。
2. jQuery Steps 依赖全局作用域中的 jQuery，若导入顺序或作用域处理不当，会导致插件无法识别 jQuery。

方案一：在 app.js 中完成初始化 #

修改 resources/js/app.js，将插件初始化逻辑移至此处，确保 DOM 加载完成后执行：

import './bootstrap';

import jQuery from 'jquery';
// 同时将 $ 和 jQuery 挂载到全局作用域
window.$ = window.jQuery = jQuery;

// 确保全局 jQuery 存在后再导入插件
import 'jquery-steps/build/jquery.steps.min.js';

// 等待 DOM 加载完成后初始化插件
document.addEventListener('DOMContentLoaded', () => {
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
});

视图中仅保留 Vite 引入代码：

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

方案二：修改视图中的脚本类型 #

如果必须在视图中编写初始化代码，移除 type="module"，使用普通脚本标签（共享全局作用域），同时等待 DOM 加载完成：

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

<script>
    document.addEventListener('DOMContentLoaded', () => {
        $("#example-basic").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            autoFocus: true
        });
    });
</script>

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