Hell guys ,

I am using Laravel 9 and I want to use sweetalert2 and filepond in my project. I installed the mentioned plugins through npm. This is my app.js file

import './bootstrap';

import Alpine from 'alpinejs';

import * as FilePond from 'filepond';
import Swal from 'sweetalert2';

import 'filepond/dist/filepond.min.css';

window.Alpine = Alpine;
window.FilePond = FilePond;
window.Swal = Swal;

I also included this in head tag

 @vite(['resources/css/app.css', 'resources/js/app.js'])

I also run this command in terminal without any error.

npm run dev

This is my script tag for sweetalert2.

@if(Session::has('status'))
   // This works but I don't want it -> {{-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}} 

  // This one is not working            
  <script>
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: "{{Session::get('status')}}",
                    showConfirmButton: false,
                    timer: 1500
                })
  </script>
@endif

This is my script tag for filepond.

<script>
        // Get a reference to the file input element
        const inputElement = document.querySelector('input[type="file"]');
        
        // Create a FilePond instance
        const pond = FilePond.create(inputElement);
</script>

I also get this error after using sweetalert2 or filepond

• Uncaught ReferenceError: Swal is not defined
• Uncaught ReferenceError: FilePond is not defined

Is it because of the vite?

How can I fix this?

I used sweetalert2 in my previous project in Laravel 8.x and that was working and the app.js file looked like this.

require('./bootstrap');
window.Swal = require('sweetalert2')
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

This require function is not working in Laravel 9.2 and I get the same error require is not defined.