nuxt-modules / og-image Goto Github PK
View Code? Open in Web Editor NEWGenerate OG Images with Vue templates in Nuxt.
Home Page: https://nuxtseo.com/og-image
Generate OG Images with Vue templates in Nuxt.
Home Page: https://nuxtseo.com/og-image
For instance a single quote '
is turned into '
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.
------------------------------
- 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: `-`
------------------------------
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!
/
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
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"
},
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.
Provide the title without template as prop to the image island component e.g. as titleRaw
or something.
No response
No response
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..
No response
No response
Needs docs site
Make docs site
No response
No response
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)
No response
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: `-`
------------------------------
FIrst of all, thank you for making/maintaining this library :)
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..
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',
},
},
npx playwright install && nuxt generate
to see if the issue was caused by playwright but the problem still persisted.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...
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.
https://github.com/BroJenuel/BroJenuelBlog/tree/development
------------------------------
- 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: -
------------------------------
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.
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.
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)
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.)
No response
No response
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!
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
https://github.com/stefangouldson/nuxt-ogimage-error
Windows 11
Node v18
nuxt: "^3.6.1",
nuxt-seo-kit: "^1.3.9"
The convention for managing site urls is changing.
Use nuxt-site-config to manage site url.
No response
No response
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 😅
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?
No response
------------------------------
- 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: -
------------------------------
Is there a way to make the <Icon />
component from nuxt-icon
work with the 'browser' rendering mode? That would be super epic!
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.
No response
------------------------------
- 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: `-`
------------------------------
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.
No response
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
yarn
https://github.com/vercel/satori
https://github.com/josueayala27/vue-satori
No response
No response
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)))
No response
- 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: `-`
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.
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.
None.
No response
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 :)
For the issues described below:
/public
folderwidth
and a height
(which I thought were optional attributes -- and again, it works in dev), then I get the following error:<img>
tagAfter 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
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.
https://github.com/ojvribeiro/vulmix-docs
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: -
------------------------------
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:
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))
I get the same TypeError at start-up, and then the following error on any __og_image__/og.png
https://stackblitz.com/edit/nuxt-starter-3ueqlw
npm i
npm run build
: see error_01 abovenode .output/server/index.mjs
: see error_02 aboveI have rolled back to 2.0.0-beta.21
for the time being
------------------------------
- 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: -
------------------------------
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.
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?
It's not intuitive that providing css via the Vue <style>
tag won't work.
We just need to inline the generated css against the generated HTML.
No response
No response
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.
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
}
;
No response
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: `-`
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?
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:
BASE_URL
[email protected]:schneider-carlo/nuxt-og-image-issue.git
- 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: `-`
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
https://stackblitz.com/edit/nuxt-starter-p6wd8z?file=components%2FCustomBanner.island.vue
------------------------------
- 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: -
------------------------------
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)
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
Build stops when facing this error.
Could be related to previous issue #42 related to fonts
On latest beta 2.0.0-beta.32
No response
No response
When using this module on netlify you will get a white box when you open up the url for the og:image.
[email protected]:schneider-carlo/nuxt-og-image-issue.git
- 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: `-`
Visualisation of og.png
leads to the referenced error.
https://stackblitz.com/edit/nuxt-starter-gdt6pi?file=pages/index.vue
Click on any "OG:IMAGE" link.
------------------------------
- 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: `-`
------------------------------
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
https://stackblitz.com/edit/nuxt-starter-uheyd6
------------------------------
- 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: `-`
------------------------------
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
I'm following the tutorial describe here https://github.com/harlan-zw/nuxt-og-image
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
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.
Hello,
is it somehow possible to set the same og:image generated by this library as the twitter:image as well?
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
No response
------------------------------
- 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: `-`
------------------------------
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
Umlauts like "äöüß" don't get displayed correctly in the title, they get displayed encoded: äöüß
Strangely, they work in the description.
https://stackblitz.com/edit/github-qadgtd?file=app.vue
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
npm
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:
------------------------------
- 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: `-`
------------------------------
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.