Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR rendering errors #649

Open
jackkitley opened this issue Jul 23, 2024 · 1 comment
Open

SSR rendering errors #649

jackkitley opened this issue Jul 23, 2024 · 1 comment

Comments

@jackkitley
Copy link

jackkitley commented Jul 23, 2024

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
Copy link
Author

Sorted this.

It had a issue using promise in ssr.

i removed

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant