jquery-confirm Implement lib into Laravel 10 with Vite.js

jquery-confirm version: v3.3.4

I'm submitting a ... (check one with "x") [ ] bug report [ ] feature request [x] support request

Current behavior:

Expected behavior:

Steps to reproduce:

Related code: resources/js/app.js :

// jQuery Confirm
import 'jquery-confirm';

// Custom app JS
import './_script';

resources/js/_script.js :

// Actions Confirm
$('body').on('click', '.action.confirm', function(e) {
    e.preventDefault();

    var title = $(this).attr('data-confirm-title');
    var message = $(this).attr('data-confirm-message');
    var that = this;

    $.confirm({
        icon: 'fa fa-warning',
        title: title,
        content: message,
        draggable: false,
        buttons: {
            yes: {
                text: 'Confirmer',
                btnClass: 'btn-outline-danger btn-round waves-effect waves-light btn-confirm',
                keys: ['enter'],
                action: function() {
                    if ($(that).hasClass('form')) {
                        confirmSubmitForm(that);
                    } else {
                        confirmLinkLocation(that);
                    }
                }
            },
            no: {
                text: 'Non',
                btnClass: 'btn-outline-light btn-round waves-effect waves-light btn-cancel',
                keys: ['esc'],
            }
        }
    });
});

Error showing Uncaught TypeError: $.confirm is not a function at HTMLButtonElement. (app-d2beca6b.js:60:22976) at HTMLBodyElement.dispatch (app-d2beca6b.js:39:43768) at ge.handle (app-d2beca6b.js:39:41705)

Other information:

I dev with Laravel 10 and npm with Vite, how can I use jquery-confirm with this configuration ?

Mar 13 '23 01:03 valentinoeval

I found a solution (with static call and add type="module" for script tag but no any other solution with npm vite config ?) :

<head>
    ...

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">

    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
</head>

Mar 13 '23 09:03 valentinoeval

It seems to work if I do like this in my app.js, but I'm not sure if its "correct"

import jConfirm from 'jquery-confirm';

jConfirm();

// additional application code

Jun 13 '23 11:06 hmazter

jquery-confirm jquery-confirm copied to clipboard

Implement lib into Laravel 10 with Vite.js

jquery-confirm
jquery-confirm copied to clipboard