Laravel 9+Vite+Vue ambiguous indirect export: ZiggyVue

[hawkiq]

Hello I used Ziggy with many Laravel versions and it was works immediately using @routes in blade but after switching to Laravel 9 I started to not understand how to properly setup Ziggy so I will say what I've done and tell me why i Keep getting ambiguous indirect export: ZiggyVue error.

installed latest version of ziggy using composer composer require tightenco/ziggy

published routes to ziggy.js php artisan ziggy:generate

here is my vite.config.js file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
        },
    },
});

My app.js file

//app.js

 import { ZiggyVue } from 'ziggy';
 import { Ziggy } from './ziggy';

import "./bootstrap";
import { createApp } from "vue";

const app = createApp({});

const components = import.meta.globEager("./components/**/*.vue");
Object.entries(components).forEach(([path, definition]) => {
    const componentName = path
        .split("/")
        .pop()
        .replace(/\.\w+$/, "");
    app.component(componentName, definition.default);
});
app.use(ZiggyVue, Ziggy);
app.mount("#main");

but when am using route inside vue file it says ambiguous indirect export: ZiggyVue

when i tried to use @routes in blades it gave me _ctx.route is not a function

what should I do to make it works as before .?

[bakerkretzmar]

Thanks for the detailed description!

This should fix it:

-            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
+            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),

I don't know what that error message means exactly, but looking at it locally it looks like Vite is resolving vue at the end of the aliased path to vue.js, which is the UMD build, which I guess Vite doesn't like. If you explicitly point it at either vue.es.js or vue.m.js it works normally.