Laravel+Inertia+React = Type 'Router' is not assignable to type 'string'.

[deniznet]

Hi!

Version:

composer.json:

"require": {
"php": "^8.2",
"ext-xmlreader": "",
"defstudio/telegraph": "^1.49",
"guzzlehttp/guzzle": "^7.9.2",
"inertiajs/inertia-laravel": "^2.0",
"jenssegers/agent": "^2.6",
"laravel/framework": "^11.36.1",
"laravel/pulse": "^1.3.2",
"laravel/reverb": "1.4.4",
"laravel/sanctum": "^4.0",
"laravel/tinker": "^2.10",
"predis/predis": "^2.3",
"spatie/laravel-permission": "^6.10",
"tightenco/ziggy": "^2.4",
"ext-intl": ""
},
"require-dev": {
"fakerphp/faker": "^1.24",
"laravel/breeze": "^2.3",
"laravel/pint": "^1.18",
"laravel/sail": "^1.39",
"mockery/mockery": "^1.6",
"nunomaduro/collision": "^8.5",
"phpunit/phpunit": "^11.5",
"spatie/laravel-ignition": "^2.0"
},

package.json:

{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build && vite build --ssr"
},
"devDependencies": {
"@editorjs/embed": "^2.7.4",
"@editorjs/table": "^2.3.0",
"@headlessui/react": "^2.0.0",
"@inertiajs/react": "^1.0.0",
"@tailwindcss/forms": "^0.5.3",
"@types/mathjax": "^0.0.40",
"@types/node": "^18.13.0",
"@types/nprogress": "^0.2.3",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.12",
"axios": "^1.7.4",
"editorjs-hyperlink": "^1.0.6",
"editorjs-table": "^1.4.10",
"editorjs-undo": "^1.0.1",
"laravel-echo": "^1.16.1",
"laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31",
"pusher-js": "^8.4.0-rc2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.2.1",
"typescript": "^5.0.2",
"vite": "^6.0",
"vite-plugin-static-copy": "^1.0.6"
},
"dependencies": {
"@codexteam/ajax": "^4.2.0",
"@codexteam/icons": "^0.3.0",
"@editorjs/delimiter": "^1.4.0",
"@editorjs/editorjs": "^2.29.1",
"@editorjs/header": "^2.8.1",
"@editorjs/inline-code": "^1.5.0",
"@editorjs/link": "^2.6.2",
"@editorjs/list": "^1.9.0",
"@editorjs/paragraph": "^2.11.4",
"@formkit/tempo": "^0.1.2",
"@inertiajs/server": "^0.1.0",
"@react-input/mask": "^1.2.4",
"better-react-mathjax": "^2.0.3",
"codex-notifier": "^1.1.2",
"codex-tooltip": "^1.0.5",
"editorjs-mathlive": "^1.0.1",
"highlight.js": "^11.9.0",
"mathjax": "^3.2.2",
"mathjax-full": "^3.2.2",
"mathlive": "^0.98.6",
"nprogress": "^0.2.0",
"react-arborist": "^3.4.0",
"react-feather": "^2.0.10",
"sortablejs": "^1.15.2"
}
}

Describe the problem:

When I try run: npm run build - I get error:

resources/js/ssr.tsx:24:17 - error TS2322: Type 'Router' is not assignable to type 'string'.

24                 route(name, params as any, absolute, {
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
25                     ...page.props.ziggy,
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
26                     location: new URL(page.props.ziggy.location),
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
27                 });

my 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.SSR) {
            hydrateRoot(el, <App {...props} />);
            return;
        }

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

ssr.tsx:

import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import ReactDOMServer from 'react-dom/server';
import { RouteName } from 'ziggy-js';
import { route } from '../../vendor/tightenco/ziggy';

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

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.tsx`,
                import.meta.glob('./Pages/**/*.tsx'),
            ),
        setup: ({ App, props }) => {
            /* eslint-disable */
            // @ts-expect-error
            global.route<RouteName> = (name, params, absolute) =>
                route(name, params as any, absolute, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
            /* eslint-enable */

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

index.d.ts

import { Config } from 'ziggy-js';


export type PageProps<
    T extends Record<string, unknown> = Record<string, unknown>,
> = T & {

    ziggy: Config & { location: string };
    auth: Auth;
    menus: ITypeData<IMenu>;
    rights: {roles: Role[], permissions: Permission[]};
};

export interface User {
    id: number;
    name: string;
    gender?: string;
    email: string;
    email_verified_at: string;
    phone: string;
    phone_verified_at: string;
}
...

global.d.ts

import { PageProps as InertiaPageProps } from '@inertiajs/core';
import { AxiosInstance } from 'axios';
import { route as ziggyRoute } from 'ziggy-js';
import { PageProps as AppPageProps } from './';

declare global {
    interface Window {
        axios: AxiosInstance;
    }

    /* eslint-disable no-var */
    var route: typeof ziggyRoute;
}

declare module '@inertiajs/core' {
    interface PageProps extends InertiaPageProps, AppPageProps {}
}

Steps to reproduce:

Try update all package (composer and node)

What I should do?