2

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.

Najeeb Anwari
  • 85
  • 10
  • Could you share your `view` where you have the Swal script? – Coola Jul 18 '22 at 18:19
  • I used the Swal script in my layout file above the – Najeeb Anwari Jul 18 '22 at 18:25
  • [here's](https://larainfo.com/blogs/how-to-install-bootstrap-5-in-laravel-9-with-vite) how he installed bootstrap using vite, i am planning using laravel vite on my future projects and I think I will copy this procedure for other packages too. Hoping this would help. – kapitan Jul 22 '22 at 07:24
  • Hey, @kapitan I tried the tips but didn't solve my problem. I still get FilePond is undefined. – Najeeb Anwari Jul 23 '22 at 15:38
  • I would guess that the blade file where your `Swal.fire()` code is loading before the ` – kapitan Jul 25 '22 at 00:57
  • That's why you said that it is working when you included the sweetalert2 package before your `Swal.fire()` code from CDN. – kapitan Jul 25 '22 at 01:02

1 Answers1

1

The problem was my I was trying to access Swal and FilePond before they have been loaded into the window. A fix for that is to make sure you only execute some JavaScript after the window and its properties have loaded.

window.addEventListener('load', () => {
    // window has loaded...
});

Or you can listen for when the document has finished loading.

document.addEventListener('DOMContentLoaded', () => {
    // document has loaded...
});
Najeeb Anwari
  • 85
  • 10