Laravel vite : Uncaught ReferenceError: jQuery is not defined

Question

I need to use jQuery Steps plugin with Laravel. I have added jQuery and jQuery Steps via NPM this is my resources\js\app.js

import './bootstrap';

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

window.jQuery = jQuery


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

This is my view.

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

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

But getting this error.

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

Answer 1

I had to use it like this in app.js

import('jquery-steps/build/jquery.steps.min.js').then(() => {
    $(document).ready(function () {
        $('#example-basic').steps({
            headerTag: 'h3',
            bodyTag: 'section',
            transitionEffect: 'slideLeft',
            autoFocus: true
        });
    });
});