Inertiajs: Cannot read properties of undefined (reading '$swal')

[datlechin]

Describe the bug The console say Uncaught TypeError: Cannot read properties of undefined (reading '$swal')

Here is my app.js code:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3
import VueSweetalert2 from 'vue-sweetalert2';

createInertiaApp({
    resolve: name => require(`./pages/${name}`).default;
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(VueSweetalert2)
            .mount(el)
    },
})

I also want to know

• Version: Latest
• Platform: Inertiajs

[avil13]

Hi.
Is your repository closed or can I see the whole code?
Also, there is a moment.
You are using Vue3. And in the "setup" method, no context is passed there. That's why you got this error. And so you can use sweetalert2 - without a wrapper.

[datlechin]

@avil13 Here is my code

import {Link, useForm} from "@inertiajs/inertia-vue3";
import Layout from "./Layout";

export default {
    components: {
        Layout,
        Link
    },
    props: {
        transfers: Object
    },
    setup() {
        const form = useForm({
            receiver: '',
            amount: '',
            description: ''
        })

        const submit = () => {
            form.post('/user/transfer', {
                onSuccess: () => {
                    form.reset()
                    this.$swal('Testing')
                }
            });
        }

        return {form, submit}
    }
}

[avil13]

This is not a bug.

I added some comments on your code.

export default {
    // ...
    setup() {
        const form = useForm({
            receiver: '',
            amount: '',
            description: ''
        })

        const submit = () => {
            form.post('/user/transfer', {
                // since it is an arrow function, it will take the context from the setup method
                // just a warning so you don't write onSuccess() {...} - otherwise the context of this will be different
                onSuccess: () => { 
                    // here this is the context from setup
                    // but since this in setup === undefined - you get an error.
                    this.$swal('Testing')
                }
            });
        }

        return {form, submit}
    }
}

To see what I mean, you can check this example.

I wrote above, it would help you to use Sweetalert2 without the wrapper, in Vue3 - it doesn't make sense anymore.

form.post('/user/transfer', {
    onSuccess: () => { 
        Swal.fire('Testing')
    }
});

Thanks for the comments, and good luck with the code)))

[datlechin]

Thank you, it works very well with Sweetalert2 without wrapper