tighten / ziggy

Use your Laravel routes in JavaScript.
MIT License
3.86k stars 247 forks source link

Ziggy cannot resolve routes in SSR #669

Closed mansoorkhan96 closed 12 months ago

mansoorkhan96 commented 12 months ago

Hi,

I am using Jetstream as an starter kit. I have painfully resolved the route not found error by using the auto-import plugin. Now Ziggy is not able to read routes.

I have routes defined in web.php and about.index is one of them. Error: TypeError: Cannot read properties of undefined (reading 'about.index')

HandleInertiaRequests

public function share(Request $request): array
    {
        $ziggy = new Ziggy($group = null, $request->url());

        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => $ziggy->toArray(),
        ]);
    }

vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
const path = require('path');
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [
        AutoImport({
            imports: [
                { 'ziggy-js': [['default', 'route']] }
            ]
        }),
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            // ziggy:path.resolve('vendor/tightenco/ziggy/src/js'),
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue')
        },
    },
    build: {
    rollupOptions: {
      external: 'ziggy',
    },
  },
  ssr: {
    noExternal: ['@inertiajs/server'],
  },
})

ssr.js

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

import { createSSRApp, h } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { modal } from 'momentum-modal'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
import route from '../../vendor/tightenco/ziggy/dist/index.m'

const appName = 'MortgageCS'

import { FontAwesomeIcon } from './Plugins/fontawesome.js'
import globalConfig from './Hooks/loadConfig.js'

async function initializeApp() {
    const globalConfigData = await globalConfig

    createServer((page) =>
        createInertiaApp({
            page,
            render: renderToString,
            title: (title) => `${title} - ${appName}`,
            resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
            setup({ App, props, plugin }) {
                console.log(props.initialPage.props.ziggy)
                const Ziggy = {
                    // Pull the Ziggy config off of the props.
                    ...props.initialPage.props.ziggy,
                    // Build the location, since there is
                    // no window.location in Node.
                    location: new URL(props.initialPage.props.ziggy.url)
                }

                return createSSRApp({ render: () => h(App, props) })
                    .use(modal, {
                        resolve: (name) =>
                            resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
                    })
                    .use(plugin)
                    .use(ZiggyVue, {
                        ...page.props.ziggy,
                        location: new URL(page.props.ziggy.location),
                    })
                    .mixin({
                        methods: {
                            route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
                        },
                    })
                    .provide('$config', globalConfigData)
                    .component('font-awesome-icon', FontAwesomeIcon)
            },
        })
    )
}

initializeApp()