-
Notifications
You must be signed in to change notification settings - Fork 269
Description
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!