Renovamen / oh-vue-icons

A Vue component for importing inline SVG icons from different popular icon packs easily.
https://oh-vue-icons.js.org
Other
245 stars 22 forks source link

Throws warning with Inertia SSR #44

Open CharlieBrownCharacter opened 1 month ago

CharlieBrownCharacter commented 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.

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.