Ziggy route() helper TypeError: Cannot read properties of undefined (reading 'home.index')

[Daroath]

Ziggy version

2.2.1

Laravel version

10.10

Description

I'm using Ziggy version 2 and Laravel 10 with Inertiajs and Vue 3. After run build completed everything is OK, but when run the app with SSR enable. All routes throw errors like TypeError: Cannot read properties of undefined (reading 'home.index') and the app run as normal without SSR.

Ziggy call and context

<header>
            <nav class="flex flex-row gap-4">
                <Link :href="route('home.index')">Home</Link>
                <Link :href="route('about.index')">About</Link>
                <Link :href="route('home.register')">Register</Link>
            </nav>
        </header>

Ziggy configuration

Here is my app.js

import "./bootstrap";
import "../css/app.css";
import { createSSRApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import { ZiggyVue } from "ziggy-js";
import Default from "./Layouts/Default.vue";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout = page.default.layout || Default;
        return page;
    },
    title: (title) => (title ? `${title} - Sample App` : `My Sample App`),
    setup({ el, App, props, plugin }) {
        return createSSRApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .component("Link", Link)
            .component("Head", Head)
            .mount(el);
    },
    progress: {
        color: "#29d",
        includeCSS: true,
        showSpinner: false,
    },
});

and here is my ssr.js

import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import { createSSRApp, h } from "vue";
import { ZiggyVue } from "ziggy-js";
import Default from "./Layouts/Default.vue";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => {
            const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
            let page = pages[`./Pages/${name}.vue`];
            page.default.layout = page.default.layout || Default;
            return page;
        },
        title: (title) => (title ? `${title} - Sample App` : `My Sample App`),
        setup({ App, props, plugin }) {
            return createSSRApp({
                render: () => h(App, props),
            })
                .use(plugin)
                .use(ZiggyVue)
                .component("Link", Link)
                .component("Head", Head);
        },
    })
);

Route definition

Here is my Laravel route

Route::get('/', [HomeController::class, 'index'])->name('home.index');
Route::get('/register', [HomeController::class, 'register'])->name('home.register');
Route::get('/about', [AboutController::class, 'index'])->name('about.index');

[bakerkretzmar]

Because there's no window in SSR mode, you have to pass Ziggy's config and the current URL from your backend and set those values manually on the frontend. See #432 (comment).