Laravel+React(TS)+Vite+SSR = TypeError: Cannot read properties of undefined (reading 'home')

[deniznet]

Hello!
I have error in project Laravel+InertiaJS+React(TS)+Vite+SSR.
Command npm run build - without error.
Run php aritsan inertia:start-ssr without error.
But when ever I get page in brower I get error:

TypeError: Cannot read properties of undefined (reading 'home')
at new n (file:///C:/Users/user/proj/node_modules/ziggy-js/dist/index.js:1:2312)
at s (file:///C:/Users/user/proj/node_modules/ziggy-js/dist/index.js:1:5200)
at SiteIcon (file:///C:/Users/user/proj/bootstrap/ssr/ssr.js:9:102)
at renderWithHooks (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5736:15)
at renderElement (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
at renderNodeDestructiveImpl (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
at renderNodeDestructive (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
at renderNode (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
at renderChildrenArray (C:\Users\user\proj\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6226:7)

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
    ],
});

ssr.tsx. Here I limited SSR only for component in Public forlder. Another folder incloud page which cannot build for ssr (during php artisan inertia:start-ssr).

import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import ReactDOMServer from 'react-dom/server'

createServer(page =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: name => {
            const pages = import.meta.glob('./Pages/Public/**/*.tsx', { eager: true })
            return pages[`./Pages/Public/${name}.tsx`]
        },
        setup: ({ App, props }) => <App {...props} />,
    }),
)

app.tsx

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

import { createRoot, hydrateRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';


const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({ el, App, props }) {
        if (import.meta.env.DEV) {
            createRoot(el).render(<App {...props} />);
            return
        }

        hydrateRoot(el, <App {...props} />);
    },
    progress: {
        color: '#fdcf11', //4B5563
    },
});

jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "exclude": ["node_modules", "public"]
}

Spand a lot of time, but not found solution.
Thank you!

[bakerkretzmar]

It's not clear from your code snippets whether you've actually installed Ziggy and set it up at all, have you? Does it work normally for non-SSR cases?

Does your app work with SSR if you remove the Ziggy code you're trying to use?

You will probably have to pass Ziggy's routes and config from your backend during SSR and then set them onto the global Ziggy object manually. See #432 (comment) (Vue, but same idea).

[deniznet]

Thank you! Realy truble was about global Ziggy object. I've added to \js\types\global.d.ts with

import { route as ziggyRoute } from 'ziggy-js';

declare global {

    var route: typeof ziggyRoute;
}