Can not use jQuery & SweetAlert in laravel 9 with laraveldaily/larastarters starterkit package

Question

I need help about laraveldaily/larastarters starterkit package from https://github.com/LaravelDaily/Larastarters

I can't use jQuery on my project (the $(document).ready function & select2 package). below is my code that is not working:

$(document).ready(function () {
    $('.js-example-basic-single').select2();

    $('#exampleModal').modal({backdrop: 'static', keyboard: false})

    $('#warehouse_id').select2({
        dropdownParent: $('#exampleModal'),
    });
});

But I can do AJAX call, SweetAlert package & changing value with jQuery after my ajax success. below is my code that is working :

function edit(id){
    console.log('ID : ' + id);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: "GET",
        url: "{{ url('customers.getone') }}" + "/" + id,
        data: {  },
        dataType: 'json',
        success: function (res) {
            console.log(JSON.stringify(res));
            $('#id').val(res['id']);
            $('#id').attr('readonly',true);
            $('#nama').val(res['nama']);

            $('#cust_group_id').val(res['cust_group_id']).change();
            selectElement('cust_group_id', res['cust_group_id']);

            $('#warehouse_id').val(res['warehouse_id']).change();
            selectElement('warehouse_id', res['warehouse_id']);

            $('#exampleModalLabel').text('Edit Customer');
            $('#exampleModal').modal('show');
        },
        error: function(xhr, textStatus, error) {
            console.log('url : ' + this.url);
            console.log(xhr.responseText);
            console.log(xhr.statusText);
            console.log(textStatus);
            console.log(error);
            Swal.fire({
                icon: 'error',
                title: 'Error! ',
                text: xhr.statusText + ' ' + xhr.responseText + ' ' + textStatus + ' ' + error,
            })
        },
    });

I've followed the installation step correctly. I've tried adding jQuery CDN to my app.blade.php , but it's still not working.

Answer 1

Add type="module" inside your all script tags like below. I hope this should work.

<script type="module">
$(document).ready(function () {
    $('.js-example-basic-single').select2();

    $('#exampleModal').modal({backdrop: 'static', keyboard: false})

    $('#warehouse_id').select2({
        dropdownParent: $('#exampleModal'),
    });
});
</script>