Open CharlieBrownCharacter opened 1 month ago
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.
v-icon
Here it is when I include in both my app.ts and ssr.ts:
app.ts
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.
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
andssr.ts
:I have followed the docs and excluded the library from SSR:
This is how I'm using the component:
Any idea how I can get rid of this SSR error? Thank you very much for the help.