Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Throws warning with Inertia SSR #44

Open
CharlieBrownCharacter opened this issue Oct 4, 2024 · 0 comments
Open

Throws warning with Inertia SSR #44

CharlieBrownCharacter opened this issue Oct 4, 2024 · 0 comments

Comments

@CharlieBrownCharacter
Copy link

CharlieBrownCharacter commented Oct 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant