When using defineOgImage gives type error as not found

[Gants102]

Details

when using defineOgImage i get a typescript error saying not found and also which ever part of my app I use this on just goes to a 500 error page. I am using the Nuxt-SEO-kit module which includes nuxt-og-image so not sure if this might be an issue?

[harlan-zw]

Hey @Gants102, this may be an issue in that nuxt seo kit uses an old version of the nuxt-og-image module.

I'd recommend manually installing the latest version of this module to resolve

[Gants102]

Ah thank you, that seems to have solved the typescript and 500 error but when I try and register a custom template I just get an error in the console and a similar one in the playgound:

[nuxt] [request error] [unhandled] [404] [GET] "/__nuxt_island/ibwOg_RULYAZWeMR?props=%7B%22options%22:%22%7B%7D%22,%22path%22:%22/%22,%22timestamp%22:%221693344064559%22,%22scale%22:%221%22,%22mode%22:%22light%22,%22provider%22:%22satori%22,%22component%22:%22ibwOg%22,%22width%22:1200,%22height%22:630,%22cache%22:true,%22cacheTtl%22:86400000,%22title%22:%22Welcome+to+my+site!%22,%22description%22:%22Welcome+to+Indie+Beer+Week+Southampton+6th+-+15th+October+2023.+Sign+up+to+be+the+first+to+find+out+updates+on+the+event+and+when+the+full+line+up+is+released%22,%22requestOrigin%22:%22http://localhost:3000/%22%7D": 404 Island component not found: ibwOg
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15)  
  at <anonymous> (./node_modules/nuxt-og-image/dist/runtime/nitro/routes/html.mjs:39:18)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)```

I have the custom component in the `components/OgImage` folder and just tried the example from the doc and also copying the fallback template too and trying that.

[Gants102]

Also should mention using nuxt@3.7.0 and nuxt-og-image@2.0.21

[harlan-zw]

You can try out 2.0.24 and see if you have better success, otherwise, I'll need a reproduction :pray:

(see https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)

[Gants102]

Massive thanks on this, really sorry as not been able to reproduce the original problem and some how go it working locally but guessing it had something to do with where I was defining the og-image and the seo meta data. This can probably be closed as more than likely something already documented. I think my issue which led me down a rabbit hole was with custom tailwind classes not being puled through:

reproduction of issue is here

Am aware this is in the docs that tailwind support is experimental but also found if all the props are not defined it seems to lead to the template not being rendered and a blank screen in the preview. Not sure if this is desired/expected behaviour or not but normal vue components will still render if the props are not passed (see the test page).

[Gants102]

scrap the last bit, nothing appeared to be coming through as the txt was white 🙈. Can definitely close now

[harlan-zw]

Haha all good, glad you could solve it!

Let me know if you run into any other issues.