oh-vue-icons
oh-vue-icons copied to clipboard
Published
20 hours ago •
Renovamen
Renovamen
Throws warning with Inertia SSR
Hello 👋 First of all, great library. Truly solves the issues that I have been having for a long time.
I'm using Laravel with Inertia SSR using vite and I'm getting warning when I either include or remove v-icon from my code.
Here it is when I include in both my app.ts and ssr.ts:
[Vue warn]: Property "children" was accessed during render but is not defined on instance.
at <OhVueIcon name="fa-chevron-right" class="group-hover:ml-0.5 transition-[margin]" >
at <LatestBlogsSection class="mt-12" posts= [
{
id: null,
title: 'Adventures in Rio de Janeiro hello zzzz',
slug: 'adventures-in-rio-de-janeiro-hello',
excerpt: 'You can use this section to briefly describe your experience updated here zzzzz',
status: null,
content: '',
createdAt: '2024-10-01T17:55:35.000000Z',
author: {
id: '01j8t1m6are4njhnnsa5y0eqfx',
name: null,
username: 'bruno-francisco'
}
},
{
id: null,
title: 'Adventures in São Paulo because why not',
slug: 'adventures-in-sao-paulo-because-why-not',
excerpt: 'You can use this section to briefly describe your experience and then XXXXqwe qwe',
status: null,
content: '',
createdAt: '2024-10-01T17:34:26.000000Z',
author: {
id: '01j8t1m6are4njhnnsa5y0eqfx',
name: null,
username: 'bruno-francisco'
}
},
{
id: null,
title: 'Adventures in Ljubljana',
slug: 'adventures-in-ljubljana',
excerpt: 'You can use this section to briefly describe your experience',
status: null,
content: '',
createdAt: '2024-09-27T15:35:09.000000Z',
author: {
id: '01j8t1m6are4njhnnsa5y0eqfx',
name: null,
username: 'bruno-francisco'
}
},
{
id: null,
title: 'Adventures in Buenos Aires qweqwe',
slug: 'adventures-in-buenos-aires',
excerpt: 'You can use this section to briefly describe your experience eeee',
status: null,
content: '',
createdAt: '2024-09-27T15:34:07.000000Z',
author: {
id: '01j8t1m6are4njhnnsa5y0eqfx',
name: null,
username: 'bruno-francisco'
}
}
] >
at <Welcome errors= {} locale="pt" auth= { user: null } ... >
at <GuestLayout errors= {} locale="pt" auth= { user: null } ... >
at <Inertia initialPage= {
component: 'Welcome',
props: {
errors: {},
locale: 'pt',
auth: { user: null },
flash: { message: null },
ziggy: {
url: 'http://nomadzin.local',
port: null,
defaults: [],
routes: [Object],
location: 'http://nomadzin.local/pt'
},
latestPosts: [ [Object], [Object], [Object], [Object] ]
},
url: '/pt',
version: '066e7bdf29ce13ff0afb2fab9560c4e1'
} initialComponent= {
layout: {
__name: 'GuestLayout',
__ssrInlineRender: true,
setup: [Function (anonymous)],
inheritAttrs: false
},
__name: 'Welcome',
__ssrInlineRender: true,
props: { latestPosts: {} },
setup: [Function (anonymous)],
inheritAttrs: false
} resolveComponent=fn<r> ... >
at <App>
I have followed the docs and excluded the library from SSR:
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.ts',
ssr: 'resources/js/ssr.ts',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
optimizeDeps: {
exclude: ['oh-vue-icons/icons'],
},
ssr: {
noExternal: ['oh-vue-icons'],
},
})
This is how I'm using the component:
<template>
<Head title="Welcome" />
<main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12">
<v-icon name="fa-chevron-right"/>
</main>
</template>
Any idea how I can get rid of this SSR error? Thank you very much for the help.
