Passing Ziggy configuration to Inertia.js SSR in a Svelte app

[avanerk]

Ziggy version

v2.0.4

Laravel version

v11.0.7

Description

I'm trying to integrate Ziggy.js with Inertia.js SSR in a Svelte application, but I'm having trouble passing the Ziggy configuration to the Inertia.js context. Here's my current setup (ssr.js):

// ssr.js
import { createInertiaApp } from '@inertiajs/svelte'
import createServer from '@inertiajs/svelte/server'
import { route } from 'ziggy-js'

createServer(page => createInertiaApp({
  page,
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true });
    return pages[`./Pages/${name}.svelte`];
  },
  setup({ el, App, props }) {
    const Ziggy = { ...props.initialPage.props.ziggy, location: new URL(props.initialPage.props.ziggy.url) };
    return new App({ target: el, props });
  },
}));

Somewhere in my svelte app I am doing this, which works fine outside of SSR:

<Link href={route('home')}>Home</Link>

But when running ssr.js I am getting the following error:

TypeError: Cannot read properties of undefined (reading 'home')
at new n (file:///path/to/project/node_modules/ziggy-js/dist/index.js:1:2281)
at s (file:///path/to/project/node_modules/ziggy-js/dist/index.js:1:5088)
at file:///path/to/project/bootstrap/ssr/ssr.js:735:13

I assume that when SSR is loading it does not know what the 'route' function is. In my svelte app it's a function on the window object but this is not available on the server. How can I make it available on the server side as well?

[bakerkretzmar]

I assume that when SSR is loading it does not know what the 'route' function is.

It doesn't look to me like that's the error, it looks like there are no routes. I'm not super familiar with Svelte but I think the issue is probably that when you're doing const Ziggy = ... that variable is only available inside your setup() function, not globally.

With Vue, something like that works because Ziggy is then passed into the Vue plugin or to a customized route() function (see #432 (comment)).

If Svelte has plugins or mixins like that you could define your own route() function in setup() and pass it into your app, otherwise I would try setting globalThis.Ziggy to what you have instead of declaring a new Ziggy variable.

Let me know if any of that helps!

[avanerk]

After reviewing the Svelte documentation, I couldn't find any specific way on passing global data to a Svelte application.
The issue seems to be that the ziggy object needs to be initialized and made available within the Svelte context.
However i am not sure if this is feasible or if there are any established ways to achieve this. It may require some custom setup or integration work to bridge the gap between the framework and the global data source.

[bakerkretzmar]

globalThis is a JavaScript thing, it's not Vue-specific. You should be able to access that everywhere.