I am using sweetalert 2 with laravel project, it works fine when I am using CDN link, but it does not work after installation through npm install --save sweetalert2 and gives the following error.

posts:1441 Uncaught ReferenceError: swal is not defined
at posts:1441:23

(anonymous) @ posts:1441

my code:

1: with cdn

   <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    const Toast = swal.mixin({
        toast: true,
        position: 'top-right',
        showConfirmButton: false,
        showCloseButton: true,
        timer: 5000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    });

    window.addEventListener('alert', ({
        detail: {
            type,
            message
        }
    }) => {
        Toast.fire({
            icon: type,
            title: message
        })
    })
</script>

this works fine, but i dont want to use cdn.

2: through npm:

steps

First

npm install --save sweetalert2

Second in app.js

import Swal from 'sweetalert2';

Third

npm run dev

but it does not work.

how can we solve the problem?