TypeError while accessing Inertia SSR

[Verox001]

Version:

• @inertiajs/react version: 1.0.14

Describe the problem:

I have setup SSR for my Laravel Vite MUI TSX Application and it's rendering just fine in the browser and I have the feeling that SSR is working, because it's signifitant faster. The problem however is that whenever someones visits the site, I receive following error in the SSR console I started with the Artisan Command:

TypeError: Cannot read properties of undefined (reading 'default')
    at file:///var/www/App/node_modules/@inertiajs/react/dist/index.esm.js:1:1529
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async j (file:///var/www/App/node_modules/@inertiajs/react/dist/index.esm.js:1:1548)

Steps to reproduce:

Just follow the steps from the guide till Hydration: https://inertiajs.com/server-side-rendering

[boudewijnbout]

I have this too..

[wkuznet]

same problem

[okusarobert]

same problem here

[thdebay]

I'm also experiencing the same, and when I disable JS in my browser the page stops working, which indicates SSR is not fully working, I guess... Has anyone solved the issue?

[rockblings]

i'm experiencing the same issue

[iambryansanders]

I have this one too. It is working locally, but not on Forge.

Same error in Vue.

[driesvints]

Hi all. You can let us know if you're experiencing the same through a 👍 on the original post. Otherwise please limit the convo to discussing the issue and possible solutions. Thanks

[thanasisxan]

I don't know exactly what is the problem, but after spending many hours to make inertia ssr actually work with react mui components I found this solution:

in vite.config.js add this:

    ssr: {
        noExternal: [
            "@mui/material",
            "@mui/utils",
            "@mui/base",
            "@mui/icons-material",
            "@mui/system",
            "@mui/styled-engine",
        ],
    },

[iambryansanders]

Figured this out with the help of some great people in the discord...

You need to look at the case of the Pages folder. It was capitalized in my app.js, but in my git is was listed was pages.

This is not a bug of SSR itself, but likely how the file is created. Check there first! And then check the case of the components folder too!

[iambryansanders]

I think you can close this! @Verox001 @driesvints

[driesvints]

Thanks!

[deniznet]

Thanks!

Hi! So, where was mistakes? I have the same 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 'default')
    at file:///D:/pathto/laravel/proj/node_modules/@inertiajs/react/dist/index.esm.js:5:1551
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async V (file:///D:/pathto/laravel/proj/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)
TypeError: Cannot read properties of undefined (reading 'default')
    at file:///D:/D:/pathto/laravel/proj/node_modules/@inertiajs/react/dist/index.esm.js:5:1551
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async V (file:///D:/D:/pathto/laravel/proj/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)

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!

[deniznet]

May be need anybody) I added global declaration ziggy to /resources/js/type/global.d.ts:

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

declare global {

    var route: typeof ziggyRoute;
}