Ziggy cannot resolve routes in SSR

[mansoorkhan96]

Hi,

I am using Jetstream as an starter kit. I have painfully resolved the route not found error by using the auto-import plugin.
Now Ziggy is not able to read routes.

I have routes defined in web.php and about.index is one of them.
Error: TypeError: Cannot read properties of undefined (reading 'about.index')

HandleInertiaRequests

public function share(Request $request): array
    {
        $ziggy = new Ziggy($group = null, $request->url());

        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => $ziggy->toArray(),
        ]);
    }

vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
const path = require('path');
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [
        AutoImport({
            imports: [
                { 'ziggy-js': [['default', 'route']] }
            ]
        }),
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            // ziggy:path.resolve('vendor/tightenco/ziggy/src/js'),
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue')
        },
    },
    build: {
    rollupOptions: {
      external: 'ziggy',
    },
  },
  ssr: {
    noExternal: ['@inertiajs/server'],
  },
})

ssr.js

// import './bootstrap'
// import '../css/app.css'

import { createSSRApp, h } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { modal } from 'momentum-modal'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
import route from '../../vendor/tightenco/ziggy/dist/index.m'

const appName = 'MortgageCS'

import { FontAwesomeIcon } from './Plugins/fontawesome.js'
import globalConfig from './Hooks/loadConfig.js'

async function initializeApp() {
    const globalConfigData = await globalConfig

    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 }) {
                console.log(props.initialPage.props.ziggy)
                const Ziggy = {
                    // Pull the Ziggy config off of the props.
                    ...props.initialPage.props.ziggy,
                    // Build the location, since there is
                    // no window.location in Node.
                    location: new URL(props.initialPage.props.ziggy.url)
                }

                return createSSRApp({ render: () => h(App, props) })
                    .use(modal, {
                        resolve: (name) =>
                            resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
                    })
                    .use(plugin)
                    .use(ZiggyVue, {
                        ...page.props.ziggy,
                        location: new URL(page.props.ziggy.location),
                    })
                    .mixin({
                        methods: {
                            route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
                        },
                    })
                    .provide('$config', globalConfigData)
                    .component('font-awesome-icon', FontAwesomeIcon)
            },
        })
    )
}

initializeApp()

[bakerkretzmar]

You're configuring Ziggy in several different ways and you only need one. I don't use SSR so I'm not positive which way is best, but I can suggest a few things:

• Look at fix: make location configurable #432.
• Remove either the ZiggyVue plugin or the route mixin, you only need one or the other. I'd probably keep the plugin.
• I don't know what the auto-import thing is but you don't need it. If it's so that you don't have to import or inject route everywhere, I'd get everything working first without it and then add it back later.

Can you also share exactly where and how you're actually calling route() in your components? The error you're getting about accessing 'about.index' on undefined doesn't really make sense to me, that's a route name so it's weird that it's being used as a property.

[Froelund]

I've encountered this same issue.

I fixed it by removing the

.use(ZiggyVue, {
    ...page.props.ziggy,
    location: new URL(page.props.ziggy.location),
})

And then sharing ziggy through our HandleInertiaRequests middleware, and then assigning it to globalThis in ssr.ts and app.ts.

export async function handler(page) {
  return await createInertiaApp({
    page,
    render: renderToString,
    title: title => title,
    resolve: (name) => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
      const page = pages[`./Pages/${name}.vue`];
      page.default.layout = page.default.layout || [BaseLayout, InfoPageLayout];
      return page;
    },
    setup({ App, props, plugin }) {
      const VueApp = createSSRApp({ render: () => h(App, props) });

      const config = props.initialPage.props as InertiaProps;

      // @ts-expect-error Ziggy type is missing
      globalThis.Ziggy = config.ziggy;
      
      // etc ...

      return VueApp
        .use(plugin);
    }
  });
}

When ziggys router is constructed this config is used

ziggy/src/js/Router.js

Line 17 in cd1ebc7

this._config = config ?? (typeof Ziggy !== 'undefined' ? Ziggy : globalThis?.Ziggy);