Vue: Cannot convert undefined or null to object

[sweptsquash]

Ziggy version

2.1.0

Laravel version

11.1.1

Description

Hi,

When I use the route helper function for example fetching the current page with route().current() I'm given the error Cannot convert undefined or null to object, this also occurs with getting a route with route('news.index').

In my app.js I'm defining the plugin and passing the exported config like so. However if I add globalThis.Ziggy = Ziggy; to the app.js the error goes away. Not sure if this is intended given I'm passing the config to the plugin.

import '../css/app.css'
import Layout from '@/layouts/default.vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from 'ziggy-js'
import { Ziggy } from '@/routes/routes.js'
import { createApp, h } from 'vue'

createInertiaApp({
    progress: {
        color: '#4B5563',
    },
    resolve: (name) =>
        resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')).then(
            (module) => {
                const page = module.default

                page.layout = page.layout || Layout

                return page
            },
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el)
    },
})

In my NavBar.vue script I have the following onBeforeMount to set the current active link for styling:

const navigationItems = ref([
    { name: 'News', href: '/news', route: 'news.*', current: false },
    { name: 'Reviews', href: '/reviews', route: 'reviews', current: false },
    { name: 'Guides', href: '/guides', route: 'guides', current: false },
    { name: 'Schedule', href: '/schedule', route: 'schedule', current: false },
    { name: 'About', href: '/about', route: 'about', current: false },
])

onBeforeMount(() => {
    router.on('navigate', () => {
        const currentActive = navigationItems.value.findIndex((item) => item.current === true)
        const newActive = navigationItems.value.findIndex((item) => {
            if (item.route === null) {
                return false
            }

            return route().current(item.route)
        })

        if (newActive === -1 && currentActive !== -1) {
            navigationItems.value[currentActive].current = false
        }

        if (newActive > -1 && currentActive !== newActive) {
            if (currentActive !== -1) {
                navigationItems.value[currentActive].current = false
            }

            navigationItems.value[newActive].current = true
        }
    })
})

Ziggy call and context

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at n.u (ziggy-js.js?v=3272b7cd:743:29)
    at n.current (ziggy-js.js?v=3272b7cd:751:65)
    at NavBar.vue:21:28
    at Proxy.findIndex (<anonymous>)
    at NavBar.vue:16:49
    at HTMLDocument.n (@inertiajs_vue3.js?v=3272b7cd:4157:16)
    at f (@inertiajs_vue3.js?v=3272b7cd:3878:19)
    at S (@inertiajs_vue3.js?v=3272b7cd:3885:16)
    at @inertiajs_vue3.js?v=3272b7cd:3959:96

Ziggy configuration

{
    url: 'http://localhost:8000',
    port: 8000,
    defaults: {},
    routes: {
        'filament.exports.download': {
            uri: 'filament/exports/{export}/download',
            methods: ['GET', 'HEAD'],
            parameters: ['export'],
            bindings: { export: 'id' },
        },
        'filament.imports.failed-rows.download': {
            uri: 'filament/imports/{import}/failed-rows/download',
            methods: ['GET', 'HEAD'],
            parameters: ['import'],
            bindings: { import: 'id' },
        },
        'filament.admin.auth.login': {
            uri: 'admin/login',
            methods: ['GET', 'HEAD'],
            domain: 'admin.senshudo.tv',
        },
        'filament.admin.auth.logout': {
            uri: 'admin/logout',
            methods: ['POST'],
            domain: 'admin.senshudo.tv',
        },
        'filament.admin.pages.dashboard': {
            uri: 'admin',
            methods: ['GET', 'HEAD'],
            domain: 'admin.senshudo.tv',
        },
        'sanctum.csrf-cookie': { uri: 'sanctum/csrf-cookie', methods: ['GET', 'HEAD'] },
        'livewire.update': { uri: 'livewire/update', methods: ['POST'] },
        'livewire.upload-file': { uri: 'livewire/upload-file', methods: ['POST'] },
        'livewire.preview-file': {
            uri: 'livewire/preview-file/{filename}',
            methods: ['GET', 'HEAD'],
            parameters: ['filename'],
        },
        'ignition.healthCheck': { uri: '_ignition/health-check', methods: ['GET', 'HEAD'] },
        'ignition.executeSolution': { uri: '_ignition/execute-solution', methods: ['POST'] },
        'ignition.updateConfig': { uri: '_ignition/update-config', methods: ['POST'] },
        'articles.index': { uri: 'api/articles', methods: ['GET', 'HEAD'] },
        'articles.homepage': { uri: 'api/articles/homepage', methods: ['GET', 'HEAD'] },
        'articles.featured': { uri: 'api/articles/featured', methods: ['GET', 'HEAD'] },
        'articles.show': {
            uri: 'api/articles/{article}',
            methods: ['GET', 'HEAD'],
            parameters: ['article'],
            bindings: { article: 'slug' },
        },
        'categories.index': { uri: 'api/categories', methods: ['GET', 'HEAD'] },
        'categories.show': {
            uri: 'api/categories/{category}',
            methods: ['GET', 'HEAD'],
            parameters: ['category'],
            bindings: { category: 'id' },
        },
        search: { uri: 'api/search', methods: ['GET', 'HEAD'] },
        home: { uri: '/', methods: ['GET', 'HEAD'] },
        'news.index': { uri: 'news', methods: ['GET', 'HEAD'] },
        'news.show': {
            uri: 'news/{article}',
            methods: ['GET', 'HEAD'],
            parameters: ['article'],
            bindings: { article: 'slug' },
        },
    },
}

Route definition

Route::get('/', HomepageController::class)->name('home');

Route::prefix('news')->name('news.')->group(function () {
    Route::get('/', [NewsController::class, 'index'])->name('index');
    Route::get('/{article}', [NewsController::class, 'show'])->name('show');
});

[bakerkretzmar]

Your setup looks fine, it's weird that setting globalThis.Ziggy fixes it. If you add a console.log(Ziggy) inside your main setup() function what gets logged? Does it look correct?

Are you using SSR?

Does moving your router.on('navigate', () => {}) callback into your root app.js fix anything? You only need to call that once ever, so it shouldn't be in a component or any kind of mounted hook because then it'll get registered repeatedly.

[sweptsquash]

I am building with SSR in mind, but not yet enabled/running locally.

This is the output for console.log(Ziggy) in setup it shows it's correctly imported and the exported const of Ziggy that is generated by php artisan ziggy:generate.

I did a little more testing, found that route().current() and route('news.index') work within the template portion of any components, but do not work within the script portion, so if I were to for example use a computed like so, I'd end up with the same issue:

const navigationItems = computed(() => [
    { name: 'News', href: '/news', route: 'news.*', current: route().current('news.*') },
    { name: 'Reviews', href: '/reviews', route: 'reviews', current: false },
    { name: 'Guides', href: '/guides', route: 'guides', current: false },
    { name: 'Schedule', href: '/schedule', route: 'schedule', current: false },
    { name: 'About', href: '/about', route: 'about', current: false },
])

However if I use const route = useRoute(Ziggy) this issue doesn't occur.

Edit: Sorry just to provide context on the router.on('navigate', () => {}) this is the Inertia Router, I'm performing this function to correctly indicate on page load/navigation which route is active.

[bakerkretzmar]

Gotcha. In Vue 3 using <script setup> you have to const route = inject('route'); everywhere you want to use the route function in the script portion of a component. In the template portion it's available globally for you.

I know it's the Inertia router, that's what I was talking about. You only need to add those listeners once, if you do it in a component hook and don't clean it up properly the listeners will get added over and over again.

[Bencute]

I came across the same problem when using route ziggy 1.8 in SSR laravel 10 + inertia outside of vue component, after 2 days of searching for a solution bakerkretzmar's post led me to the following solution. To use ziggy outside of vue, you need to create a Route instance and pass the path configuration to it. You can make a global default configuration by setting up the global object globalThis.Ziggy, which will then be used as the default. I got the following solution:

In ssr.js

createServer(
    (page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`../Pages/${name}.vue`, import.meta.glob('../Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            globalThis.Ziggy = {
                ...page.props.ziggy,
                location: new URL(page.props.ziggy.location),
            };
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .provide(ID_INJECTION_KEY, {
                    prefix: 1024,
                    current: 0,
                });
        },
    })
);

configure global settings by

            globalThis.Ziggy = {
                ...page.props.ziggy,
                location: new URL(page.props.ziggy.location),
            };

and then you can use ziggy as follows in some js file (example):

import route from 'ziggy-js';

function getParams(page)
{
    const params = route().params;
    params._query = { page: page };
    return params;
}

export function url(page)
{
    return route(route().current(), getParams(page));
}