Implement lib into Laravel 10 with Vite.js #568

valentinoeval · 2023-03-13T01:58:26Z

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 ?

valentinoeval · 2023-03-13T09:03:59Z

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>

hmazter · 2023-06-13T11:00:43Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement lib into Laravel 10 with Vite.js #568

Implement lib into Laravel 10 with Vite.js #568

valentinoeval commented Mar 13, 2023 •

edited

valentinoeval commented Mar 13, 2023

hmazter commented Jun 13, 2023 •

edited

Implement lib into Laravel 10 with Vite.js #568

Implement lib into Laravel 10 with Vite.js #568

Comments

valentinoeval commented Mar 13, 2023 • edited

valentinoeval commented Mar 13, 2023

hmazter commented Jun 13, 2023 • edited

valentinoeval commented Mar 13, 2023 •

edited

hmazter commented Jun 13, 2023 •

edited