Components PathPrefix:false in nuxt.config.ts breaks Lib

[philippmunzert]

Describe the bug

Hi, at first very promising lib! Would love to get it working in my project.

I've set the path prefix option to false in my nuxt.config.ts.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['nuxt-og-image', 'nuxt-icon'],
  components: [
    {
      path: '~/components',
      pathPrefix: false, // <-- this
    },
  ],
});

This seems to break the support for the internal lib components llike <OgImage />. I also tried to play a little bit with the liv config:

...
 ogImage: {
    componentDirs: ['~/components/OgImage']
  }
...

I see some errors in my console where nuxt is running:

[nuxt] [request error] [unhandled] [500]  (500 The path / is missing the og-image payload. (/api/og-image-options?path=/))          3:55:16 PM
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:234:14)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async fetchOptions (./.nuxt/dev/index.mjs:1559:15)  
  at async ./.nuxt/dev/index.mjs:2420:19  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1284:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1359:7)

and also in the Browser Console like in the Reproduction:

 blitz.e809191e.js:42 [nuxt] [request error] [unhandled] [404]  (404 Island component not found: undefined (/__nuxt_island/MyTemplate_NBc25afyoU?

But this has no effects. Would love the get some help on this problem.

Reproduction

https://stackblitz.com/edit/nuxt-starter-ubcxwu?file=nuxt.config.ts

System / Nuxt Info

- Operating System: `Darwin`
- Node Version:     `v18.14.2`
- Nuxt Version:     `3.6.2`
- Nitro Version:    `2.5.2`
- Package Manager:  `yarn@1.22.19`
- Builder:          `vite`
- User Config:      `ssr`, `modules`, `directus`, `image`, `gsap`, `app`, `runtimeConfig`, `build`, `components`, `sitemap`, `nitro`, `experimental`, `ogImage`
- Runtime Modules:  `@nuxtjs/tailwindcss@6.8.0`, `@vueuse/nuxt@10.2.1`, `@hypernym/nuxt-gsap@2.2.2`, `nuxt-directus@5.4.4`, `@nuxt/image@1.0.0-rc.1`, `nuxt-simple-sitemap@2.7.0`, `nuxt-og-image@2.0.4`
- Build Modules:    `-`

[harlan-zw]

Hey, thanks for the issue.

I think this is a limitation with Nuxt Islands, they need the path prefix, will need to investigate more. For now, you can see if the following helps

 components: [
    {
      path: '~/components',
      pathPrefix: false, // <-- this
    },
   {
      path: '~/components/OgImage',
      pathPrefix: true
    },
  ],

[harlan-zw]

This is fixed in the latest version :)

[philippmunzert]

Thansk @harlan-zw for the fix. Upgraded to v2.0.6 but it won't work.

Still have errors like:

[Vue warn]: Invalid vnode type when creating vnode: undefined.                                                                                        1:38:48 PM
[Vue warn]: Component <Anonymous> is missing template or render function.                                                                             1:38:48 PM
[1:38:48 PM] [nuxt] [request error] [unhandled] [500]  (500  (/__nuxt_island/OgImageTemplateFallback_YlvKezjHSR?props=%7B%22path%22:%22/%22,%22options%22:%22%7B%5C%22timestamp%5C%22:%5C%221688989126847%5C%22,%5C%22component%5C%22:%5C%22OgImageTemplateFallback%5C%22,%5C%22width%5C%22:1200,%5C%22height%5C%22:630,%5C%22cache%5C%22:true,%5C%22cacheTtl%5C%22:86400000,%5C%22path%5C%22:%5C%22/%5C%22,%5C%22title%5C%22:%5C%22Hey!%5C%22,%5C%22description%5C%22:%5C%22Welcome+to+the+Nuxt+OG+Image+demo.+Try+changing+this+text.%5C%22,%5C%22icon%5C%22:%5C%22carbon:help%5C%22,%5C%22provider%5C%22:%5C%22satori%5C%22,%5C%22requestOrigin%5C%22:%5C%22http://localhost:3001/%5C%22%7D%22,%22component%22:%22OgImageTemplateFallback%22,%22width%22:1200,%22height%22:630,%22cache%22:true,%22cacheTtl%22:86400000,%22title%22:%22Hey!%22,%22description%22:%22Welcome+to+the+Nuxt+OG+Image+demo.+Try+changing+this+text.%22,%22icon%22:%22carbon:help%22,%22provider%22:%22satori%22,%22requestOrigin%22:%22http://localhost:3001/%22,%22timestamp%22:%221688989126847%22%7D))
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:234:14)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./.nuxt/dev/index.mjs:2600:18  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1284:19)  
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1359:7)  
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:206:26)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:234:14)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async Object.createVNode (./.nuxt/dev/index.mjs:2373:18)

Tried it with a really basic implementation like index.vue from Blitzstack:

  <template>
    <OgImage
      title="Hey!"
      description="Welcome to the Nuxt OG Image demo. Try changing this text."
      icon="carbon:help"
    />
    <h1>index page</h1>
    <div>Playground preview: available at /__og_image__</div>
    <iframe src="/__og_image__" style="width: 100%; border: none; height: 800px">
    </iframe>
  </template>

Disabled also all other modules to avoid some sideeffects:

- Operating System: `Darwin`
- Node Version:     `v18.14.2`
- Nuxt Version:     `3.6.2`
- Nitro Version:    `2.5.2`
- Package Manager:  `yarn@1.22.19`
- Builder:          `vite`
- User Config:      `modules`, `image`
- Runtime Modules:  `nuxt-og-image@2.0.6`, `@nuxt/image@1.0.0-rc.1`
- Build Modules:    `-`