Emoji unknown or invalid utility error doesn't generate any content in og image

[azelalynetan]

Describe the bug

Found out that if there's an emoji in the meta title or description using useHead, nuxt-og-image does not generate any content in the OG image. It only throws an "emoji unknown or invalid utility" error.

Sample code for useHead with emoji values:

useHead({
  title: 'My Profile 😊',
  meta: [
    {
      name: 'description',
      content: 'My Profile Description 😊',
    },
    {
      property: 'og:title',
      content: 'My Profile 😊',
    },
    {
      property: 'og:description',
      content: 'My Profile Description 😊',
    }
  ]
})

OG image generated by nuxt-og-image with useHead sample code above: This should contain logo, title, and description.

Note: OG Image generated without any issues if there's no emoji used in the meta from useHead.

Reproduction

No response

System / Nuxt Info

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.3.3`
- Nitro Version:    `2.3.3`
- Package Manager:  `npm@8.11.0`
- Builder:          `vite`
- User Config:      `routeRules`, `css`, `app`, `vite`, `modules`, `runtimeConfig`
- Runtime Modules:  `@pinia/nuxt@0.4.11`, `@nuxtjs/supabase@0.3.5`, `@nuxtjs/google-fonts@3.0.1`, `nuxt-og-image@2.0.0-beta.40`
- Build Modules:    `-`
------------------------------

[harlan-zw]

Thanks for the issue @azelalynetan!

Would it be possible to create a StackBlitz reproduction? It would help me out a lot :pray:

[azelalynetan]

Sorry, I'm new at using StackBlitz and still trying to figure out how can I run the simple reproduction that I made. It's not running due to native addons error.

StackBlitz reproduction: https://stackblitz.com/edit/nuxt-starter-5coazk?file=README.md

Here's the repository I made for this issue (hope it could help 🙏): https://github.com/azelalynetan/nuxt-og-image-bug

And for the correction, as I test again today - the content on the OG image is only blank if there's an emoji in the page title and not in the meta section.

You can test by removing the emoji on the page title or commenting out the entire useHead, and og image will be generated as expected.

Thank you :)

[harlan-zw]

Hey @azelalynetan, sorry for the delay.

Took a look at this and it seems like the attributes being inherited is causing Satori to parse the HTML incorrectly.

Providing the below code fixed it. Have added it to the docs and default component.

<template>
// inherited attrs can mess up the satori parser
defineOptions({
  inheritAttrs: false,
})
</template>

I also fixed up emojis not being rendered inline. The stackblitz works a bit better but will fail on the emojis. (see https://stackblitz.com/edit/nuxt-starter-w9yd8v?file=components%2Fislands%2FSampleOgImage.vue).

[azelalynetan]

Hi Harlan, sorry for late response. I was able to test now on my project using the latest beta release. I no longer encounter the emoji warning and emojis are now working on the meta.

Thank you so much for looking into this! 😊