Sweetalert2: "swal is not defined" after migrating from Sweet Alert 1

[egeersoz]

I was previously using the original Sweet Alert, and things were working fine. Upgraded to SA2 and followed the migration guide. My code:

import swal from "sweetalert2"

swal({
    title: "Are you sure?",
    text: "This cannot be undone.",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes.",
    closeOnConfirm: false,
    showLoaderOnConfirm: true
}).then(function() {
    /* do stuff */
})

This results in swal is not defined.

Webpack doesn't report an error, so it's not a compilation issue. Do I have to do something else to make this work? Other than switching from callbacks to promises as per the migration guide, nothing else has changed in my code. Using Chrome.

[toverux]

Could you tell us what version of Webpack you use, and the transpiler (TypeScript, Babel...)?
Also, please post the relevant part of the JavaScript that Webpack produces.

[limonte]

[limonte]

@egeersoz I just updated https://github.com/limonte/sweetalert2-webpack-demo to latest versions, works fine, take a look.

[egeersoz]

For anyone struggling with this, I finally resolved it by re-importing swal in each component in which it is invoked. Importing it just in main.js didn't work.

I use Vue.js. Did not have this problem with the original SweetAlert.

[webhacking]

@egeersoz me too

[toverux]

Just in case you're wondering, this is normal and indicates that your module bundler does its job correctly, and that swal is no longer a global object manually attached to the window, but behaves like a real ES 2015 module.

[webhacking]

import swal from 'sweetalert2';

window.swal = swal

[omererbil]

i had resolved this issue by replacing sweetalert2 cdn

[hagolo]

i had resolved this issue by replacing sweetalert2 cdn

Thank you ) its worked for me

[kshitish45]

i had resolved this issue by replacing sweetalert2 cdn

Thank you :) its also worked for me

[gverni]

@hagolo @kshitish45 would you mind providing the full description of your problem with the code on a new issue? Keep in mind that you are using an outdated source for the sweetalert code (see here for the latest version) and you are not benefitting from the latest bug fixes / improvement.

[limonte]

Also, I recommend using jsdelivr as CDN service:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

[zhxscript]

import swal from 'sweetalert2';

window.swal = swal

This did it for me

[GarbledTTT]

i had resolved this issue by replacing sweetalert2 cdn

Thank you :) its also worked for me

Wow , That's great

[gverni]

@GarbledTTT the cloudflare CDN is not the _official_ one. Please use the one pointed by limonte above:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

[wandaazhar007]

i had resolved this issue by replacing sweetalert2 cdn

Thanks dude. It's works

[linces]

How and where to do it?

@GarbledTTT the cloudflare CDN is not the _official_ one. Please use the one pointed by limonte above:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>