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
Please or to participate in this conversation.