tighten / ziggy

Use your Laravel routes in JavaScript.
MIT License
3.87k stars 247 forks source link

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

Closed deniznet closed 1 week ago

deniznet commented 1 week ago

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!