inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
2.03k stars 227 forks source link

SSR rendering errors #649

Open jackkitley opened 1 month ago

jackkitley commented 1 month ago

Getting a error when using ssr rendering.

ive run php artisan ziggy:generate

Starting SSR server on port 13714...
Inertia SSR server started.
Retail
TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received undefined
    at write_ (node:_http_outgoing:949:11)
    at ServerResponse.write (node:_http_outgoing:908:15)
    at Server.<anonymous> (file:///var/www/html/node_modules/@inertiajs/core/dist/server.esm.js:1:506) {
  code: 'ERR_INVALID_ARG_TYPE'

php middleware

class HandleIneriaRequests extends Middleware
{
    protected $rootView = 'module';

    public function version(Request $request)
    {
        return parent::version($request);
    }

    /**
     * Handle an incoming request.
     */
    public function share(Request $request): array
    {
        return [
            'site' => 'retail',
            'ziggy' => fn () => [
                ...(new Ziggy())->toArray(),
                'location' => $request->url(),
            ],
        ];
    }
}

vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import manifestSRI from 'vite-plugin-manifest-sri'

export default defineConfig({
    server: {
        port: 1337
    },
    build: {
        outDir: '../../public/build-retail',
        rollupOptions: {
            output: {
                manualChunks: (id) => {
                    if (id.includes('node_modules')) return id.toString().split('node_modules/')[1].split('/')[0].toString()
                }
            }
        }
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, '../../resources/js'),
            '@@': path.resolve(__dirname, '/resources/js'),
            ziggy: path.resolve('../../vendor/tightenco/ziggy/src/js')
        }
    },
    plugins: [
        laravel({
            publicDirectory: '../../public',
            buildDirectory: 'build-retail',
            input: __dirname + '/resources/js/app.js',
            ssr: __dirname + '/resources/js/ssr.js',
            refresh: ['resources/js/**', 'resources/views/**', 'routes/**'],
            hotFile: __dirname + '/storage/vite.hot'
        }),
        manifestSRI(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ]
})

ssr.js

import { createInertiaApp, Link } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue'
import { __ } from '@/Core/Translator.js'
import { createPinia } from 'pinia'

import Default from '@@/Layouts/Default.vue'
import { useLanguageStore } from '@/Stores/TranslationsStore.js'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from 'ziggy'
import { Ziggy } from './ziggy'

const pinia = createPinia()

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => {
            console.log('Retail')
            const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))

            page.then((module) => {
                module.default.layout = Default
            })

            return page
        },
        setup({ App, props, plugin }) {
            return createSSRApp({
                render: () => h(App, props)
            })
                .use(plugin)
                .use(pinia)
                .use(ZiggyVue, Ziggy)
                .component('Link', Link)
                .mixin({ methods: { __ } })
        }
    }).then((r) => {
        const languageStore = useLanguageStore()
        languageStore.loadTranslations()
    })
)
jackkitley commented 1 month ago

Sorted this.

It had a issue using promise in ssr.

i removed

.then((r) => {
        const languageStore = useLanguageStore()
        languageStore.loadTranslations()
    })