How Can I Install sweetalert2 via Laravel-Mix?

Question

STEP1: In console/terminal.

npm install --save sweetalert2

STEP2: In app.scss add this line...

@import '~sweetalert2/src/sweetalert2.scss';

STEP3: In app.js add this line...

const swal = require('sweetalert2');

STEP4: In webpack.min.js...

mix.setPublicPath('public');
mix.js('resources/js/app.js', 'js');
mix.sass('resources/sass/app.scss', 'css');

STEP5: npm run dev

STEP6: Add app.js and app.css to HTML document

I got this error:

Uncaught ReferenceError: swal is not defined

What's the missing step?

Romano

where is this error appearing? I'm guessing it's not app.js and you defined swal in app.js. – Maurya

Answer 1

If you want to make it available anywhere you would have to tie it to the window:

const swal = window.swal = require('sweetalert2');

But a better way would be to include it in any file you use it in, the same way you did in app.js

Tirol

Answer 2

Update /resources/js/bootstrap.js.

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('sweetalert2');
    require('bootstrap');
} catch (e) {}

Negrito

Answer 3

try this in bootstrap.js add :

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    const Swal = window.Swal = require('sweetalert2');

    require('bootstrap');

} catch (e) {}

in app.sass add

@import "~sweetalert2/src/sweetalert2";

Descendent