Route is not defined, laravel breeze inertia react SSR

First you need to get ziggy-js

npm install ziggy-js

Then run

php artisan ziggy:generate

Which should create a ziggy.js file in the resources/js directory. After modify your ssr.js to

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/inertia-react'
import createServer from '@inertiajs/server'
import route from "ziggy-js";
import { Ziggy } from '@/ziggy'


createServer((page) => createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: name => require(`./Pages/${name}`),
    setup: ({ App, props }) => {

        // Set global function route
        global.route = (name, params, absolute, config = Ziggy) => route(name, params, absolute, config);

        return <App {...props} />
    },
}))

Solution by JefteCaro

More solutions in case you'd like to read more

Have you tried this? It was in the Routing - Inertia.

app.config.globalProperties.$route = route

replace

<script src="{{ mix('js/app.js') }}" defer></script>

with

<script src="{{ mix('js/ssr.js') }}" defer></script>

in /resources/views/app.blade.php

In my own case, I was getting the error: ReferenceError: route is not defined even after trying out all the suggestions above. This was because in my app, I use the helper route('name') to create all my URLs. What I did to fix it was to add route to the globalThis module, which makes the route helper available for Node.js.

This works for me:

createServer((page) => {
    globalThis.route<RouteName> = (name, params, absolute) =>
        route(name, params, absolute, {
            ...page.props.ziggy,
            location: new URL(page.props.ziggy.location),
        });

    return createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: async (name) => {
            const pages = import.meta.glob("./Pages/**/*.tsx");
            let page: any = pages[`./Pages/${name}.tsx`];

            if (typeof page === "function") {
                page = await page();
            }

            if (typeof page === "undefined") {
                throw new Error(`Page not found: ${name}`);
            }

            if (!page.default.layout) {
                const publicPageFolders = ["Public/"];

                const isPublicPage = publicPageFolders.some((folder) =>
                    name.startsWith(folder),
                );

                if (isPublicPage) {
                    page.default.layout = (page: any) => (
                        <GuestLayout children={page} />
                    );
                }
            }

            return page;
        },
        setup: ({ App, props }) => {
            return <App {...props} />;
        },
    });
});