Uncaught TypeError: Cannot read properties of null (reading 'jquery')

[nigelandamCvSU]

I use this Vue Sweetalert 2 in my Laravel 11, Inertia JS, and Vue 3.

In my app.js I properly registered the sweetalert.

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

let sweetAlertOptions = {
  customClass: {
    confirmButton: "btn bg-green-700 hover:bg-green-600 text-white m-1 px-5",
    cancelButton: "btn btn-secondary m-1 px-5"
  },
  reverseButtons: true,
  buttonsStyling: false
};

createInertiaApp({
  resolve: async name => {
    const pages = import.meta.glob('./Pages/**/*.vue')

    const page = await pages[`./Pages/${name}.vue`]()
    page.default.layout = page.default.layout || AuthenticatedLayout

    return page
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })

    app.component('InertiaLink', Link)
    app.component('FontAwesomeIcon', FontAwesomeIcon)
    app.use(plugin)
      .use(ZiggyVue)
      .use(VueSweetalert2, sweetAlertOptions)
      .mount(el)
  },
})

So now, I'm utilizing it to flash messages from every response to my request on my Authenticated.vue

<script setup>
import Navbar from '@/Components/Navbar.vue'
import Sidebar from '@/Components/Sidebar.vue'
import { getCurrentInstance, computed, watch } from 'vue'
import { getAuthenticatedUser } from '@/helper.js'
import { usePage } from '@inertiajs/vue3'
import { debounce } from 'lodash'

const { $swal } = getCurrentInstance().appContext.config.globalProperties
const user = getAuthenticatedUser()

const flashMessage = computed(() => {
  const flash = usePage().props.flash
  return flash
})

watch(flashMessage, debounce((newVal) => {
  if (newVal) {
    $swal(newVal.title || 'Alert', newVal.message, newVal.variant)
  }
}, 300), { // Debounce after 1 second
  immediate: true, // Show initial flash message
})
</script>

However upon refreshing/entering the page. I'm getting this error, I tried onMounted and onUpdated before. I tried now the combination of computed and watch. It seems the case is still the same.

vue-sweetalert.mjs:1056 Uncaught TypeError: Cannot read properties of null (reading 'jquery')