Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

skicross's avatar

Inertia SSR build warnings

I'm new to Inertia but experienced in Laravel. Working on SSR app using Vue3 and Vite. While watch is running everything works as expected, no errors or warnings. As soon as I build app and start artisan command

php artisan inertia:start-ssr

app is working correctly but I see warnings from running artisan commands.

TypeError: Cannot read properties of undefined (reading 'title')

I noticed these are errors from the props. I tried console.log these props and they are present and contain all the data! I really don't understand what I'm doing wrong. I was following inertia docs for SSR.

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
	plugins: [
		laravel({
			input: ['resources/js/app.js', 'resources/sass/app.scss'],
			ssr: 'resources/js/ssr.js',
			refresh: true,
		}),
		vue({
			template: {
				transformAssetUrls: {
					base: null,
					includeAbsolute: false,
				},
			},
		}),
		DefineOptions(),
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./resources/js/', import.meta.url)),
		},
	},
})

app.js

import { createSSRApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import Layout from './layouts/Layout.vue'
import '../sass/app.scss'

createInertiaApp({
	resolve: async name => {
		const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))
		page.default.layout ??= Layout
		return page
	},
	setup({ el, App, props, plugin }) {
		createSSRApp({ render: () => h(App, props) })
			.use(plugin)
			.mount(el)
	},
})

ssr.js

import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue'
import Layout from './layouts/Layout.vue'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

createServer(page =>
	createInertiaApp({
		page,
		render: renderToString,
		resolve: async name => {
			const page = await resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))
			page.default.layout ??= Layout
			return page
		},
		setup({ App, props, plugin }) {
			return createSSRApp({
				render: () => h(App, props),
			}).use(plugin)
		},
	}),
)

I tried to access props via defineProps but also via page.props but both shows warnings.

Using docker and running php artisan inertia:start-ssr inside docker

0 likes
0 replies

Please or to participate in this conversation.