Describe the bug

first of all, thanks for your great work

the bug appears when characters are like persian or hebrew (rtl languages probably) , it seems it can't encode them.
here are some outputs: hebrew, persian, english

I think it might do something with nuxt server components

thank you again

Reproduction

No response

System / Nuxt Info

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v18.14.1`
- Nuxt Version:     `3.3.3`
- Nitro Version:    `1.0.0`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `extends`, `app`, `router`, `experimental`, `components`, `modules`, `i18n`, `headlessui`, `colorMode`, `tailwindcss`, `runtimeConfig`, `nitro`
- Runtime Modules:  `[email protected]`, `@pinia/[email protected]`, `@nuxtjs/[email protected]`, `@nuxt/[email protected]`, `[email protected]`, `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `@pinia-plugin-persistedstate/[email protected]`
- Build Modules:    `-`
------------------------------

Details

Hey @harlan-zw, I've tried to make a custom template and added an image, and ran into issues. Could you let me know if I'm doing anything wrong, or whether there might be a bug?
cc @Sandros94: as requested. If this is any close to the issue you've been facing, or if you have any tips, please chip in :)

Intro

For the issues described below:

• I used an image located in the /public folder
• Things work fine in dev, but not in prod. Therefore I don't really know whether it really makes sense to give you a repro because it most likely won't show on e.g. Stackblitz: perhaps you could try on your end with a simple prod test?

Issue 1: with @nuxt/image-edge

• If I don't specify a width and a height (which I thought were optional attributes -- and again, it works in dev), then I get the following error:

• After I did, then I get an og.png image, but images are not shown (only the text -- title and description -- appear)

Issue 2: with a simple <img> tag

After remplacing the <nuxt-img> tag by a simple <img> tag to see if it would work better, I got the following error when building my app (I deploy to a node.js server with universal rendering):

ERROR  [vite]: Rollup failed to resolve import "/images/screenshot.png" from "/var/www/mywebsite/components/islands/CustomOgImage.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Note: the image is located in /public/images/screenshot.png

Details

Site Link: https://brojenuel.com/blog/Useful-100-AI-Tools-That-You-can-Use
Link: https://brojenuel.com/blog/Useful-100-AI-Tools-That-You-can-Use/__og_image__/og.png

Describe the bug

For instance a single quote ' is turned into '

Reproduction

https://stackblitz.com/edit/nuxt-starter-gdt6pi?file=pages/singlequote.vue
Does not work with Firefox (see #29)
Click on "Single quote" and then on "OG:IMAGE" to see the image.

System / Nuxt Info

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.3.2`
- Nitro Version:    `2.3.2`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `runtimeConfig`, `modules`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`
------------------------------

Details

I'm getting this error when I try to run the nuxt generate command on Digital Ocean:

Locally it works without issues and I've installed playwright. Do I need to install any other packages?

Using it like this:

defineOgImageStatic({
  component: 'OgMain',
  provider: 'browser',
})

nuxt-seo-kit
Nuxt 3.2.3 with Nitro 2.2.3

Details

Currently when you want to access the playground without the path "/" using the composables of this package, it is not possible because an error appears in the console saying that the path "/" is required to use the composables of the package. Is there any way to see the playground without the "/" path needing to use it?

[nuxt] [request error] [unhandled] [500] 500 The path / is missing the og-image payload. (/api/og-image-options?path=/)                                                                                         21:43:46  
  at async Object.handler (/C:/Users/inmor/Documents/Proyectos/Naeko/dashboard/.nuxt/dev/index.mjs:1180:19)
  at async Object.handler (/C:/Users/inmor/Documents/Proyectos/Naeko/dashboard/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:990:19)
  at async Server.toNodeHandle (/C:/Users/inmor/Documents/Proyectos/Naeko/dashboard/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1065:7)

Details

Since Satori is not rendering my OG images correctly I tried the provider: browser option. But if I do this

it just generates a screenshot of the page and not of my OG component. Is that how it is supposed to work? And if yes, what's the difference to defineOgImageScreenshot ? Would be nice to render screenshots of the OG island component so that there are no design limits.

Describe the bug

Hey @harlan-zw, has anything changed since Nuxt 3.6.0? Can't figure out why things are not working after bumping nuxt to latest.

[nuxt-og-image 11:33:49 PM]  WARN  nuxt-og-image does not support the nitro target undefined with the runtime browser. Set runtimeBrowser: false to stop seeing this.
                                                                              11:33:47 PM
✔ Nitro built in 1449 ms                                                nitro 11:33:53 PM
ℹ Vite client warmed up in 2841ms                                             11:33:54 PM
✔ Vite server hmr 18 files in 1064.645ms                                      11:33:56 PM
[Vue warn]: Component <Anonymous> is missing template or render function.     11:33:56 PM
[11:33:57 PM] [nuxt] [request error] [unhandled] [404]  (404 Island component not found: undefined (/__nuxt_island/OgImageBasic:VvoKLzP9ba?

I basically took your "Minimal Playground Example" and bumped both Nuxt to v3.6.1 and nuxt-og-image to beta.58

Reproduction

https://stackblitz.com/edit/nuxt-starter-p6wd8z?file=components%2FCustomBanner.island.vue

System / Nuxt Info

------------------------------
- Operating System: Linux
- Node Version:     v16.20.0
- Nuxt Version:     3.6.1
- Nitro Version:    2.5.1
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      modules
- Runtime Modules:  [email protected]
- Build Modules:    -
------------------------------

Details

I am working on a blog site, I created an island component for my OG, and currently, I am using v-if in the component. But is there a better way to add a conditional? or I am doing it right?

Describe the bug

When deploying to Vercel, no error occurs on build, but no OG Images are available and I receive a Serveless Function error when I try to access the image:

This is the complete log of the error:

Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: Body is unusable","reason":{"errorType":"TypeError","errorMessage":"Body is unusable","stack":["TypeError: Body is unusable","    at specConsumeBody (node:internal/deps/undici/undici:6539:15)","    at Response.arrayBuffer (node:internal/deps/undici/undici:6434:18)","    at Object.transform (file:///var/task/chunks/rollup/provider.mjs:94:41)","    at async walkSatoriTree (file:///var/task/chunks/rollup/provider.mjs:60:11)","    at async walkSatoriTree (file:///var/task/chunks/rollup/provider.mjs:62:7)","    at async walkSatoriTree (file:///var/task/chunks/rollup/provider.mjs:62:7)","    at async walkSatoriTree (file:///var/task/chunks/rollup/provider.mjs:62:7)","    at async Object.createVNode (file:///var/task/chunks/rollup/provider.mjs:208:5)","    at async Object.createSvg (file:///var/task/chunks/rollup/provider.mjs:220:20)","    at async Object.createPng (file:///var/task/chunks/rollup/provider.mjs:194:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: Body is unusable","    at process.<anonymous> (file:///var/runtime/index.mjs:1189:17)","    at process.emit (node:events:525:35)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown

Maybe I'm doing something wrong, but I can't identify it.

Reproduction

https://github.com/ojvribeiro/vulmix-docs

System / Nuxt Info

Nuxi 3.4.3                                                                                                    
                                                                                                              
RootDir: _omitted_                                                                           
Nuxt project info:                                                                                            

------------------------------
- Operating System: Windows_NT
- Node Version:     v16.16.0
- Nuxt Version:     3.5.2
- Nitro Version:    2.4.1
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      modules, content, postcss, css, ogImage
- Runtime Modules:  @nuxt/[email protected], [email protected], @vueuse/[email protected], [email protected]
- Build Modules:    -
------------------------------

Clear and concise description of the problem

Currently each time a domain is visited with an OG image generated by the package, it is rendered by the number of times the url is visited, which could have a negative effect on the server side.

Suggested solution

It would be nice to have an option to cache the images generated by the package, with a certain expiration time, etc. In this way it would be possible to better control the resources needed for image generation.

This affects more when using the browser strategy, and not the Satori strategy.

Alternative

None.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

it just stopped working after updating to the new version, tho everything else works fine.
just the integration with devtools v0.2.5:

i cant seem to reproduce it on stackblitz, as it throws errors when it loads:

Reproduction

Stack blitz reproduction

System / Nuxt Info

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.3.1`
- Nitro Version:    `2.3.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `extends`, `build`, `nitro`, `experimental`, `modules`, `runtimeConfig`, `css`, `typescript`, `image`, `i18n`, `apiParty`
- Runtime Modules:  `@nuxt/[email protected]`, `[email protected]`, `@vueuse/[email protected]`, `[email protected]`, `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `@nuxt/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`
- Build Modules:    `-`
------------------------------

Describe the bug

When I visit the page on Netlify ../og_image/og.png, after a few moments I get error 500 WASM has not been initialized. Call initialize function..

Reproduction

No response

System / Nuxt Info

No response

Describe the bug

Hey Harlan, things have not transitioned well since the latest bump of nuxt-of-image on my project. I have been able to trace the issue back to transitioning from beta.21 (which works) to beta.22 and things still don't work with beta.29. I'm not sure what is the exact cause and it might be multiple bugs but I can at least describe the symptoms I experience below:

In my minimal repro (see link below)

error_01 When building the app, I see the following errors at the Building Nitro Server (preset: node-server) step:

Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/nuxt-og-image/dist/runtime/nitro/routes/html.mjs" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.
Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/nuxt-og-image/dist/runtime/nitro/routes/options.mjs" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.
Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/nuxt-og-image/dist/runtime/nitro/renderers/satori/plugins/imageSrc.mjs" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.
Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/nuxt-og-image/dist/runtime/nitro/renderers/satori/index.mjs" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.
Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/nuxt-og-image/dist/runtime/nitro/utils.mjs" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.

error_02 When starting the app, I immediately get the following error:
[nitro] [dev] [unhandledRejection] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".wasm" for /home/tmlmt/dev/nuxt-starter-3ueqlw/.output/server/chunks/rollup/resvg.wasm

error_03 The index page still loads, but when I then try to reach http://localhost:3000/__og_image__/og.png, it loads indefinitely, and I get the following error in server logs:

(node:26333) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 2)
(Use `node --trace-warnings ...` to show where the warning was created)
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[Vue Router warn]: No match found for location with path "/resvg.wasm"
[nitro] [dev] [unhandledRejection] FetchError:  (404 Page not found: /resvg.wasm (http://localhost:3000/resvg.wasm))

In my production app

I get the same TypeError at start-up, and then the following error on any __og_image__/og.png

Reproduction

https://stackblitz.com/edit/nuxt-starter-3ueqlw

Steps

• download the stackblitz package locally
• npm i
• npm run build : see error_01 above
• node .output/server/index.mjs: see error_02 above
• browse to http://localhost:3000/__og_image__/og.png: see error_03 above

Workaround

I have rolled back to 2.0.0-beta.21 for the time being

System / Nuxt Info

------------------------------
- Operating System: Linux
- Node Version:     v16.19.0
- Nuxt Version:     3.4.3
- Nitro Version:    2.3.3
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      app, extends, appConfig, css, postcss, build, modules, runtimeConfig, auth, content, i18n, image, nitro, routeRules, robots, security, vite
- Runtime Modules:  @sidebase/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @vueuse/[email protected], @nuxt/[email protected], @nuxt/[email protected], [email protected], [email protected], [email protected], [email protected]
- Build Modules:    -
------------------------------

Describe the bug

I am using "nuxt-seo-kit": "^1.3.8", When I try to access http://localhost:3001/__og_image__/og.png

I am receiving:

500

WASM has not been initialized. Call `initialize` function.

at svg2png (./node_modules/svg2png-wasm/dist/index.mjs:327:19)
at svg2png (./.nuxt/dev/index.mjs:1442:16)
at async Object.handler (./node_modules/h3/dist/index.mjs:1255:19)`
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1330:7)```


### Reproduction

I have installed SEOkit, now I am trying to test the og-image feature

### System / Nuxt Info

```Shell
System:
    OS: macOS 13.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 315.82 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 9.7.1 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.4

"devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/tailwindcss": "^6.7.0",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.1",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@types/node": "^18",
    "@vueuse/core": "^10.1.2",
    "@vueuse/nuxt": "^10.1.2",
    "autoprefixer": "^10.4.14",
    "nuxt": "^3.5.2",
    "nuxt-headlessui": "^1.1.4",
    "nuxt-icon": "^0.4.1",
    "nuxt-seo-kit": "^1.3.8",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2"
  },

Describe the bug

In nuxt.config.ts

ogImage: {
  fonts: ['Manrope:500'],
  satoriOptions: {
    fonts: [{
      name: 'optieinstein',
      style: 'normal',
      weight: 800,
      data: fs.readFileSync('./public/fonts/OPTIEinstein_black.woff'),
    }]
  },
}

Above code does not add a custom font. Instead, I am met with this system log

seo-image unknown or invalid utility

How can one use custom fonts that are in the project directory and not Google Fonts-based?

Reproduction

No response

System / Nuxt Info

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.15.0
- Nuxt Version:     3.4.2
- Nitro Version:    2.3.3
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      runtimeConfig, typescript, extends, ogImage, css, vite, modules, app
- Runtime Modules:  @nuxt/[email protected], @nuxt/[email protected]
- Build Modules:    -
------------------------------

Describe the bug

Build stops when facing this error.

Could be related to previous issue #42 related to fonts

On latest beta 2.0.0-beta.32

Reproduction

No response

System / Nuxt Info

No response

I'm experiencing this issue currently.

In components/islands/MyOgImage.vue

<script setup lang="ts">
const props = defineProps({
  title: String,
})
</script>

<template>
  <div class="w-full h-full flex text-white bg-blue-500 items-center justify-center">
    <h1 :style="{ fontSize: '70px' }">
      {{ title }} 👋
    </h1>
  </div>
</template>

in app.vue

<template>
  <SeoKit />
  <OgImageStatic component="MyOgImage" />
  <NuxtPage />
</template>

<style>
html {
  font-family: $dt('font.sans');
}
</style>

Resulting in error

Vue warn]: Component <Anonymous> is missing template or render function.          12:26:18 AM
[12:26:18 AM] [nuxt] [request error] [unhandled] [404]  (404 Island component not found: undefined (/__nuxt_island/MyOgImage.........

Originally posted by @boumanb in #40 (comment)

Details

So, I dont like to add the script on the home page,, but I like my ads to only display on blog pages. not my home page.

Clear and concise description of the problem

Needs docs site

Suggested solution

Make docs site

Alternative

No response

Additional context

No response

Describe the bug

I'm using a custom font and within my nuxt.config.ts I have:

ogImage: {
    fonts: [
      'Inter:400',
      {
        name: 'CalSans',
        weight: 800,
        path: '/assets/fonts/CalSans-SemiBold.ttf'
      }
    ]
  },

On build, getting the following error
ERROR [nuxt] [request error] [unhandled] [400] (400 Bad Request (https://fonts.googleapis.com/css2?family=CalSans:wght@800))

This leads to an og error
web-app:build: [nitro] ├─ /__og_image__/og.png (253ms) (Error: [500] Failed to create og image: (400 Bad Request (/api/og-image-font?name=CalSans&weight=800)))

Reproduction

No response

System / Nuxt Info

- Operating System: `Darwin`
- Node Version:     `v20.2.0`
- Nuxt Version:     `3.5.3`
- Nitro Version:    `2.4.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `extends`, `modules`, `runtimeConfig`, `css`, `app`, `ui`, `ogImage`, `nitro`, `imports`, `build`, `typescript`, `hanko`, `pinia`, `security`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxthq/[email protected]`, `@vueuse/[email protected]`, `[email protected]`, `[email protected]`, `[email protected]`, `@pinia/[email protected]`
- Build Modules:    `-`

Describe the bug

im having issues trying to understand why some tailwind classes are throwing errors when im building, and the og image not loading

locally it works fine, if you go to /faqs, but the moment you try to run yarn build it just throws errors related to tailwind, not sure what causing it tbh

Reproduction

https://stackblitz.com/edit/nuxt-starter-uheyd6

System / Nuxt Info

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.2.3`
- Nitro Version:    `2.2.3`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`
------------------------------

Describe the bug

When trying to access

https://localhost:3000/__og_image__

from my browser, I only get a black page. Also, the image at

https://localhost:3000/__og_image__/og.png

Is not existent.

Reproduction

No response

System Info

System:
    OS: Linux 6.1 openSUSE Tumbleweed 20230212
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 4.29 GB / 15.04 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 9.4.2 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Brave Browser: 110.1.48.158
    Chromium: 110.0.5481.77
    Firefox: 109.0.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

This is from live website

But it does not work in LinkedIN since Linkedin format does it this way.

Reproduction

No response

System / Nuxt Info

No response

Describe the bug

in nuxt.config.js

{
  app: { baseUrl: 'asd' }
}

Error
GET http://localhost:PORT/api/og-image-options?path=/test 404 (Cannot find any route matching /api/og-image-options?path=/test.)

Reproduction

No response

System / Nuxt Info

No response

I've faced quite a few bugs when implementing nuxt-og-image in dev but haven't been able to create a proper repro and have found my way around things. However I am facing a breaking error in production as I cannot access the /__og_image__/og.png as I can in dev.

I can see the following error in my pm2 logs:

[nuxt] [request error] [unhandled] [500] request to http://www.mywebsite.com:3000/api/og-image-options?path=/en failed, reason: connect ETIMEDOUT 11.22.33.44:3000 (http://www.mywebsite.com:3000/api/og-image-options?path=/en)
  at $fetchRaw2 (/var/www/myproject/.output/server/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)  
  at /var/www/myproject/node_modules/nuxt-og-image/dist/runtime/nitro/middleware/og.png.mjs:16:19  
  at Object.handler (/var/www/myproject/.output/server/node_modules/h3/dist/index.mjs:1247:19)  
  at Server.toNodeHandle (/var/www/myproject/.output/server/node_modules/h3/dist/index.mjs:1322:7)

I've correctly set up (I think!) the siteUrl via runtimeConfig with https and no port number, so I'm surprised to see that the url which causes an error is in http and with port 3000. I wonder if the following part of the code has something to do with it?

Using Nuxt 3.3.1 and a freshly installed nuxt-og-image.

Details

Hi!

I have a nuxt 3 page that fetches a project data from an external API. This data includes a project cover that I want to set as my OGImage.

I will paste here some snippets and what I am doing:

// This function fetches the project data. 
// The cover value is "project.value.full_cover" that returns a string like http://localhost:9000/projects/image.jpg
async function getProject() {
  await $api
    .get(`/posts/${project_id}`)
    .then((response) => {
      project.value = response.data;
    })
    .catch((error) => {
      console.log(error);
      router.push("/404");
    });
}

// I am calling the getProject() during the Mount
onMounted(async () => {
  await getProject();

I have created a Component on @/components/islands/OgImageWithImage.vue:

<template>
<div>
  <div>
    <img :src="image_path" width="1200" height="630">
  </div>
</div>
</template>

<script setup>
const props = defineProps({
  path: String,
  title: String,
  description: String,
  image_path: String,
})
</script>

The idea is to show my cover image as OGImage.

This is my resumed project component:

<template>
  <LoadingComponent v-if="loading"></LoadingComponent>
  <div v-if="!loading">
  <!-- Project layout goes here -->
  </div>
  <OgImageDynamic
    component="OgImageWithImage"
    title="Hello world"
    :image_path="project.full_cover"
  />
</template

Now I am having trouble to pass this dynamic data to my OgImageDynamic. It does not show up on the "Options" section or it does not update to the fetched value.

What am I missing here?

Thanks!

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:  `[email protected]`
- Builder:          `vite`
- User Config:      `routeRules`, `css`, `app`, `vite`, `modules`, `runtimeConfig`
- Runtime Modules:  `@pinia/[email protected]`, `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`
- Build Modules:    `-`
------------------------------

Clear and concise description of the problem

The convention for managing site urls is changing.

Suggested solution

Use nuxt-site-config to manage site url.

Alternative

No response

Additional context

No response

Describe the bug

When going to http://localhost:9001/my_url/__og_image__/og.png i got a 404 error

(404 Island component not found: undefined(/api/og-image-html?path=/my_url&options={"path":"/my_url","component":"MyOgImage","width":1200,"height":630,"provider":"satori","static":true,"backgroundColor":"bg-green-500","description":"My+title."}))

here the code i use

defineOgImageStatic({
  component: 'MyOgImage',
  title: 'My title',
  backgroundColor: 'bg-green-500',
});

I've tried to define

component: 'IslandsMyOgImage',

but it didn't work either

Reproduction

I'm following the tutorial describe here https://github.com/harlan-zw/nuxt-og-image

System / Nuxt Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 94.59 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 9.6.2 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Brave Browser: 110.1.48.171
    Chrome: 112.0.5615.49
    Firefox: 111.0.1
    Safari: 16.0

Describe the bug

og-image doesnt work, /api/og-image-html return 500 and throw error Cannot convert undefined or null to object

[nuxt] [request error] [unhandled] [500] Cannot convert undefined or null to object                      20:52:01
  at Function.entries (<anonymous>)
  at normaliseEntryTags (./node_modules/unhead/dist/index.mjs:724:10)
  at Object.resolveTags (./node_modules/unhead/dist/index.mjs:935:33)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async renderSSRHead (./node_modules/@unhead/ssr/dist/index.mjs:77:23)
  at async ./.nuxt/dev/index.mjs:5124:21
  at async Object.handler (./node_modules/h3/dist/index.mjs:1247:19)
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)
[nuxt] [request error] [unhandled] [500] Cannot convert undefined or null to object                      20:52:01
  at Function.entries (<anonymous>)
  at normaliseEntryTags (./node_modules/unhead/dist/index.mjs:724:10)
  at Object.resolveTags (./node_modules/unhead/dist/index.mjs:935:33)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async renderSSRHead (./node_modules/@unhead/ssr/dist/index.mjs:77:23)
  at async ./.nuxt/dev/index.mjs:5124:21
  at async Object.handler (./node_modules/h3/dist/index.mjs:1247:19)
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24)
[nuxt] [request error] [unhandled] [500]  (500  (/api/og-image-html?path=/ru/proxy/proxy-sale.com-ipv6&options=%7B%22path%22:%22/ru/proxy/proxy-sale.com-ipv6%22,%22component%22:%22OgImageBasic%22,%22width%22:1200,%22height%22:630,%22title%22:%22Proxy+Sale%22,%22provider%22:%22satori%22,%22static%22:true%7D))
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Object.createVNode (./.nuxt/dev/index.mjs:4892:18)
  at async Object.createSvg (./.nuxt/dev/index.mjs:4912:20)
  at async Object.createPng (./.nuxt/dev/index.mjs:4886:17)
  at async Object.handler (./node_modules/h3/dist/index.mjs:1247:19)
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)

Reproduction

No response

System / Nuxt Info

System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.03 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Safari: 16.3

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.3.1`
- Nitro Version:    `2.3.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Describe the bug

When using this module on netlify you will get a white box when you open up the url for the og:image instead of the correct og:image.
Example links:
https://nuxt-og-image-issue.netlify.app
https://nuxt-og-image-issue.netlify.app/__og_image__/og.png

Reprodction:

1. login to netlify and upload this git repository: [email protected]:schneider-carlo/nuxt-og-image-issue.git
2. set the correct base url as env variable with the name BASE_URL
3. when netlify has finished the building open up the new page
4. go to the source code and open the og:image link
5. now you should also see the white box with the missing image

Reproduction

[email protected]:schneider-carlo/nuxt-og-image-issue.git

System / Nuxt Info

- Operating System: `Darwin`
- Node Version:     `v18.16.0`
- Nuxt Version:     `3.5.1`
- Nitro Version:    `2.4.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `ogImage`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`

Clear and concise description of the problem

https://github.com/vercel/satori

Suggested solution

https://github.com/josueayala27/vue-satori

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Details

I am building a website that needs to be performant and I don't want to lose performance, but I really need something like this for customizing og images specially when sharing sites to social medias?

Describe the bug

I added to pages/index.vue

defineOgImageStatic({
  title: 'Welcome to my site!',
  background: 'lightblue'
})

Visiting http://localhost/__og_image__/og.png - no problem mostly, image generated

But visiting http://localhost/__og_image__ return blank page

Error trace:

Uncaught ReferenceError: connectWS is not defined at entry.3ad25beb.js:5:40598
(anonymous) @ entry.3ad25beb.js:5

And pointing to:

const km = Pe(Date.now())
  , dl = Pe(null)
  , Pa = window.location.host
  , Pm = `${window.location.protocol}//${Pa}`
  , Yt = Pe("/")
  , Xs = ka(()=>{
    km.value = Date.now()
}
, 200)
  , Sm = {
    refresh() {
        Xs()
    }
};
await connectWS(Pa);  // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
const x_ = createBirpcClient(Sm)
  , zt = Pe(null)
  , E_ = computed(()=>`${Pm}${Yt.value === "/" ? "" : Yt.value}`);
const Sa = (e,t)=>{
    const n = e.__vccOpts || e;
    for (const [r,s] of t)
        n[r] = s;
    return n
}
;

Reproduction

No response

System / Nuxt Info

Nuxt info

- Operating System: `Darwin`
- Node Version:     `v18.13.0`
- Nuxt Version:     `3.3.1`
- Nitro Version:    `2.3.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `app`, `runtimeConfig`, `experimental`, `nitro`, `postcss`, `modules`, `robots`, `fontMetrics`, `i18n`, `googleFonts`, `image`, `router`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `@vueuse/[email protected]`, `@nuxtjs/[email protected]`, `@nuxt/[email protected]`, `@vueuse/motion/[email protected]`, `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `[email protected]`
- Build Modules:    `-`

Details

Is there a way to make the <Icon /> component from nuxt-icon work with the 'browser' rendering mode? That would be super epic!

Describe the bug

When loading the /og_image/og.png url on my production server i got an 500 error
(Things works fine on my computer)

[nuxt] [request error] [unhandled] [500] fetch failed (https://mydomain.com/api/og-image-options?path=/item/item-slug) at $fetchRaw2 (./.output/server/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24) at ./node_modules/nuxt-og-image/dist/runtime/nitro/middleware/og.png.mjs:16:19 at Object.handler (./.output/server/node_modules/h3/dist/index.mjs:1247:19) at Server.toNodeHandle (./.output/server/node_modules/h3/dist/index.mjs:1322:7) [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [nuxt] [request error] [unhandled] [500] fetch failed (https://mydomain.com/api/og-image-options?path=/item/item-slug) at $fetchRaw2 (./.output/server/node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:180:24) at ./node_modules/nuxt-og-image/dist/runtime/nitro/middleware/og.png.mjs:16:19 at Object.handler (./.output/server/node_modules/h3/dist/index.mjs:1247:19) at Server.toNodeHandle (./.output/server/node_modules/h3/dist/index.mjs:1322:7) [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png" [Vue Router warn]: No match found for location with path "/item/item-slug/__og_image__/og.png"

Thanks for your help!

Reproduction

/

System / Nuxt Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (6) x64 AMD EPYC 7542 32-Core Processor
    Memory: 8.55 GB / 15.63 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.8.1 - ~/.nvm/versions/node/v19.8.1/bin/node
    npm: 9.6.2 - ~/.nvm/versions/node/v19.8.1/bin/npm

Details

FIrst of all, thank you for making/maintaining this library :)

Problem

While generating the project locally works fine, building the project in the Cloudflare Pages and Github Action logs out the following error:

ERROR  [nuxt] [request error] [unhandled] [500]  (500 The path ... is missing the og-image payload. (/api/og-image-options?path=...)) 

While some of my project pages are built using Nuxt Content, I noticed that the above error message happens to all of my pages so this might not be the Nuxt Content issue..

Relevant config/code

app.vue

<div>
  // ...
  <SeoKit />
  <NuxtPage />
</div>

In all of my page files, added following:

// useHead is a little different for individual pages but it generally is like below:
useHead({
  meta: [
    { name: 'keywords', content: keywords },
  ],
})

// useServerSeoMeta is a little different for individual pages but it generally is like below:
useServerSeoMeta({
  title: () => page.value?.title,
  description: () => page.value?.description,
})

defineOgImageStatic({
  component: 'MyOgImage',
  title: <string literal for different pages>,
  description: '',
  background: '#27272a',
})

In components/islands/MyOgImage.vue:

<script setup lang="ts">
const props = defineProps({
  title: String,
  description: String,
  backgroundColor: String,
})

</script>

<template>
  <div :class="[backgroundColor]" class="flex items-center justify-center w-full h-full text-white">
    <div class="flex items-center ml-20 mr-20">
      <img src="/favicon/apple-touch-icon.png" class="mr-8" width="200" height="200">
      <div class="flex flex-col">
        <h1 :style="{ fontSize: '70px' }" class="m-0">
          {{ title }}
        </h1>
        <p v-if="description" class="mt-4 text-2xl text-zinc-200">
          {{ description }}
        </p>
      </div>
    </div>
  </div>
</template>

In nuxt.config.ts:

runtimeConfig: {
    public: {
      siteUrl: '...',
      siteName: '...',
      siteDescription: '...',
      language: 'en',
    },
  },

What I tried

1. I tried npx playwright install && nuxt generate to see if the issue was caused by playwright but the problem still persisted.
2. I added the new experimentalRuntimeBrowser: true in my nuxt config, but it wasn't working.

Not sure why it works on local but fails in github action and cf pages...

Would love to provide a minimal repro but my attempt was stopped by #29.

I wonder if this part of the code might explain this behavior:
https://github.com/harlan-zw/nuxt-og-image/blob/7ad9a4505f8b47c0973baefb8e2fa9d4a99845be/src/runtime/nitro/utils-pure.ts#L33-L41

Details

Hello,

is it somehow possible to set the same og:image generated by this library as the twitter:image as well?

Details

After almost a month of debugging(my personal website), I finally found in the readme today:

This feature is not compatible with static sites built using nuxi generate.

While reading more I can see the forcePrerender option which says
This is enabled when you run nuxi generate. It forces all OG images to be pre-rendered as the server is not available to generate runtime images.

These seem contradictory to me. But perhaps i misunderstood something. Is it possible to use nuxt-og-image with SSG at all or should I avoid it completely? I love what this module does and would like to use it but my website is SSG.

For info I experienced a nasty behavior due to this which led me down this rabbit hole. After deploying my site to a static hosting, api calls were still being made on the client side even thought the full site had been build with nuxi generate. Since my api server was on localhost, the site broke on prod and it only today that i was able to narrow it down to this module.

Details

This is a fantastic library!

I'm able to generate static screenshots, but I'd like to be able to dynamically generate some on Vercel.

Locally (Mac OS), using defineOgImageScreenshot() for dynamic generation of images works fine as I have all the necessary dependencies available system wide.

Vercel serves me an empty 204 response.

Is there a configuration option I'm missing? I've ensured playwright is part of build step but I'm unsure if this is available to the app once deployed.

Describe the bug

When using the either the defineOgImageScreenshot() function or the component, after running nuxt build or generate the command cannot be run again. This due to it not being able to full remove the .output/public which has some files that deny any access.

In the public folder, the files that remain cannot be read or deleted despite me using admin access. The files tend to be the _payload.json in the root and each page folder that uses the screenshot. Also in the _nuxt folder, any images that appear on the page for the screenshot (which in example project is the navbar logo) have the same permission issue.

Have attached a link to test project to reproduce issue. Have screen recording as well which I can send if needed

Reproduction

https://github.com/stefangouldson/nuxt-ogimage-error

System / Nuxt Info

Windows 11
Node v18
nuxt: "^3.6.1",
nuxt-seo-kit: "^1.3.9"

Describe the bug

Umlauts like "äöüß" don't get displayed correctly in the title, they get displayed encoded: äöüß

Strangely, they work in the description.

Reproduction

https://stackblitz.com/edit/github-qadgtd?file=app.vue

System Info

System:
    OS: macOS 12.6.1
    CPU: (8) arm64 Apple M1
    Memory: 711.23 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Firefox: 109.0.1
    Safari: 16.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Clear and concise description of the problem

I think it is a common use case when you create a custom template that you need the title without the titleTemplate, e.g. when you have a template like %s - My Brand, in the OG image you might want to render "My Brand" as a logo or something and then just print the raw title below.

Suggested solution

Provide the title without template as prop to the image island component e.g. as titleRaw or something.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

When using this value -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff for textShadow, I receive this error.

Failed to parse declaration "textShadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff"

The issue isn't there in the Vercel playground link.

There's a chance this could be an issue from this repository rather than Satori itself because issue was fixed in this release 0.4.13. Checking this repository, the current version for Satori is 0.4.14 so I am still confused 😅

Describe the bug

Visualisation of og.png leads to the referenced error.

Reproduction

https://stackblitz.com/edit/nuxt-starter-gdt6pi?file=pages/index.vue
Click on any "OG:IMAGE" link.

System / Nuxt Info

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.14.2`
- Nuxt Version:     `3.3.1`
- Nitro Version:    `2.3.2`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `runtimeConfig`, `modules`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`
------------------------------

Describe the bug

When using this module on netlify you will get a white box when you open up the url for the og:image.

Reproduction

[email protected]:schneider-carlo/nuxt-og-image-issue.git

System / Nuxt Info

- Operating System: `Darwin`
- Node Version:     `v18.16.0`
- Nuxt Version:     `3.5.1`
- Nitro Version:    `2.4.1`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `modules`, `ogImage`
- Runtime Modules:  `[email protected]`
- Build Modules:    `-`

Describe the bug

Just got an error on the latest nuxt update.. after building, this shows up.

❯ yarn build
yarn run v1.22.19
$ nuxt build
Nuxi 3.4.1                                                                                                  8:08:41 PM

[8:08:48 PM]  ERROR  [vite]: Rollup failed to resolve import "@vueuse/head" from "D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/nuxt-og-image/dist/runtime/composables/defineOgImage.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external


[8:08:48 PM]  ERROR  [vite]: Rollup failed to resolve import "@vueuse/head" from "D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/nuxt-og-image/dist/runtime/composables/defineOgImage.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to
  build.rollupOptions.external
  at onRollupWarning (/D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)   
  at onwarn (/D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)
  at Object.onwarn (/D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/rollup/dist/es/shared/node-entry.js:25149:13)       
  at ModuleLoader.handleInvalidResolvedId (/D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/rollup/dist/es/shared/node-entry.js:23784:26)
  at /D:/Projects/PersonalProjects/BroJenuelBlog/node_modules/rollup/dist/es/shared/node-entry.js:23744:26

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduction

https://github.com/BroJenuel/BroJenuelBlog/tree/development

System / Nuxt Info

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.14.0
- Nuxt Version:     3.4.1
- Nitro Version:    2.3.3
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      ssr, modules, colorMode, routeRules, runtimeConfig, css, app
- Runtime Modules:  @vueuse/[email protected], @pinia/[email protected], [email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], [email protected]
- Build Modules:    -
------------------------------

Clear and concise description of the problem

It's not intuitive that providing css via the Vue <style> tag won't work.

Suggested solution

We just need to inline the generated css against the generated HTML.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.