Generated types don't match generated routes when using Vue

[pindab0ter]

Ziggy version

1.8.1

Laravel version

10.39.0

Description

When you run php artisan ziggy:generate --types, two files are generated:

resources/js/ziggy.js, which exports the Ziggy object.
resources/js/ziggy.d.ts, which defines the RouteList interface in the ziggy-js namespace.

Now in my app.ts file on the line where I import Ziggy (import { Ziggy } from './ziggy';) it says TS2305: Module './ziggy' has no exported member Ziggy. This is—for as far as I understand—because ziggy.d.ts's definitions differ from the contents of ziggy.js.

Ziggy call and context

n/a

Ziggy configuration

n/a

Route definition

n/a

[bakerkretzmar]

Can you share some more complete code examples so I can debug this?

This is—for as far as I understand—because ziggy.d.ts's definitions differ from the contents of ziggy.js.

I'm not sure that's what it means—it seems like an issue with your TypeScript setup or with the generated ziggy.js file.

Are you using Ziggy's NPM package? If not, did you add the ziggy-js path alias in your tsconfig?

[pindab0ter]

Sorry for not replying earlier, somehow I completely missed this question. I see @neochief provided what you asked for. Please let me/us know if you need more.

[neochief]

I have the same exact problem.

I get the following error in resources/js/app.tsx in the import { Ziggy } from './ziggy.js';:
TS2305: Module "./ ziggy. js" has no exported member Ziggy

My files are what comes from the default Laravel Breeze package. As soon as I remove the ziggy.d.ts file, the error disappears.

resources/js/app.tsx

import '../css/app.css';
import './bootstrap';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot, hydrateRoot } from 'react-dom/client';

import { Ziggy } from './ziggy.js';
globalThis.Ziggy = Ziggy;

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: '#4B5563',
    },
});

resources/js/ziggy.d.ts

/* This file is generated by Ziggy. */
declare module 'ziggy-js' {
  interface RouteList {
    "index": [],
    "pro": []
}
}
export {};

resources/js/ziggy.js

const Ziggy = {"url":"https:\/\/gitbybit.com.test","port":null,"defaults":{},"routes":{"index":{"uri":"\/","methods":["GET","HEAD"]},"pro":{"uri":"pro","methods":["GET","HEAD"]}}};
if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
  Object.assign(Ziggy.routes, window.Ziggy.routes);
}
export { Ziggy };

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "react-jsx",
        "strict": true,
        "isolatedModules": true,
        "target": "ESNext",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "skipLibCheck": true,
        "noEmit": true,
        "paths": {
            "@/*": ["./resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from "node:path";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/assets/tailwind.css',
                'resources/assets/home.js',
                'packages/ShvetsGroup/Store/src/resources/assets/js/store.js',
                'packages/ShvetsGroup/Store/src/resources/assets/css/store.css',

                'resources/js/app.tsx'
            ],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
    ],
    resolve: {
        alias: {
            'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
        },
    },
});