Configure Ziggy with Inertia and Svelte (SSR)

[jeroenvanrensen]

Hello everyone,

I want to configure Inertia SSR with Ziggy and Svelte.

In normal mode (not SSR) everything works fine, and I can see the correct link in the navbar.

In SSR mode however, after running php artisan inertia:start-ssr, I get this error: TypeError: Cannot read properties of undefined (reading 'home') at new Router (/bootstrap/ssr/ssr.js:246:31). I think the problem is that in SSR-mode the app has no idea where to find all the routes. The problem is that I have no idea on how to fix it. (In SSR-mode, the link can still be seen in the navbar, but that's when Svelte hydrates on the page.)

I hope anyone can help me out. Thanks in advance!

ssr.ts

import { createInertiaApp } from '@inertiajs/svelte'
import createServer from '@inertiajs/svelte/server'

createServer(page =>
    createInertiaApp({
        page,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
            return pages[`./Pages/${name}.svelte`]
        }
    })
)

Navbar.svelte

<script lang="ts">
    import route from 'ziggy-js'
</script>

<nav class="py-6 bg-white border-b border-gray-200 shadow">
    {route('home')}
</nav>

vite.config.js

import { svelte } from '@sveltejs/vite-plugin-svelte'
import laravel from 'laravel-vite-plugin'
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.ts',
            ssr: 'resources/js/ssr.ts',
            refresh: true
        }),
        svelte({ compilerOptions: { hydratable: true } })
    ],
    resolve: {
        alias: {
            'ziggy-js': fileURLToPath(new URL('./vendor/tightenco/ziggy/src/js', import.meta.url))
        }
    }
})

[bakerkretzmar]

I'll dig into this when I have some time, I've never used Inertia SSR and it's been years since I've used Svelte so not sure how much I'm going to be able to help.

Only thing I can think of looking at your code is that your resolve.alias.ziggy-js can possibly be simplified to something like path.resolve('vendor/tightenco/ziggy')—at the very least you definitely want it to point to the root of the ziggy folder, not ziggy/js/src.

[bakerkretzmar]

See #735 - I think the issue here is actually that in SSR mode you have to manually make Ziggy's config available to your app with the current URL, by overriding the route function or globalThis.Ziggy.