next.js: Open graph image. SVG data parsing failed cause unknown token at 1:1
Link to the code that reproduces this issue
To Reproduce
- Self-hosted NGINX server
- Cloudflare CDN
- Build app
- Upload to self host
- Open Dynamic
opengraph-image.tsx
/* eslint-disable @next/next/no-img-element */
import supabase from "@/supabase/supabase";
import { ImageResponse } from "next/og";
export const runtime = "edge";
export const dynamic = "force-dynamic"; // Sure, should work without this!!! Temp solution
const LOGO = 'https://site.com/logo.png'
// Image metadata
export const alt = "Alt text";
export const size = {
width: 1200,
height: 630,
};
export const contentType = "image/png";
// Image generation
export default async function Image({ params: { slug } }:) {
try {
const { data } = await supabase
.from("table")
.select(id)
.match({ slug })
.single();
if (!data) {
return {
title: "Titl",
};
}
return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
fontFamily: "Inter",
display: "flex",
alignItems: "center",
flexDirection: "column",
height: "100%",
width: "100%",
paddingLeft: "5%",
paddingRight: "5%",
background: "linear-gradient(to top right, #F9FAFB, #FFEDD5)",
}}
>
<div
style={{
display: "flex",
height: "20%",
alignSelf: "flex-start",
alignItems: "center",
}}
>
<img
// @ts-ignore because no other instructions https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-local-image
src={LOGO}
alt="logo"
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported opengraph-image
// size config to also set the ImageResponse's width and height.
...size,
// @ts-ignore
// fonts: await getFonts(),
}
);
} catch (error) {
console.error("Failed to fetch logo", error);
// Handle error or return a default image
}
}
Current vs. Expected behavior
On the first load of /open-graph
the image is generated.
But on cached version I got the error
⨯ Error: failed to pipe response
at pipeToNodeResponse (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/pipe-readable.js:111:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async sendResponse (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/send-response.js:40:13)
at async doRender (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1363:25)
at async cacheEntry.responseCache.get.routeKind (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1555:28)
at async NextNodeServer.renderToResponseWithComponentsImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1463:28)
at async NextNodeServer.renderPageComponent (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1856:24)
at async NextNodeServer.renderToResponseImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1894:32)
at async NextNodeServer.pipeImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:911:25)
at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:271:17) {
[cause]: Error: SVG data parsing failed cause unknown token at 1:1
at imports.wbg.__wbg_new_15d3966e9981a196 (file:///app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:18465:17)
at wasm://wasm/005420d6:wasm-function[515]:0x112c4c
at wasm://wasm/005420d6:wasm-function[30]:0x3ffde
at new Resvg (file:///app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:18347:12)
at new Resvg2 (file:///app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:18563:5)
at render (file:///app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:18783:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (file:///app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:19006:25)
}
with export const dynamic = "force-dynamic";
I receive the similar error.
⨯ Error: failed to pipe response
at pipeToNodeResponse (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/pipe-readable.js:111:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextNodeServer.runEdgeFunction (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:1225:13)
at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:247:37)
at async NextNodeServer.handleRequestImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:807:17)
at async invokeRender (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:163:21)
at async handleRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:342:24)
at async requestHandlerImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:366:13)
at async Server.requestListener (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:140:13) {
[cause]: Error: SVG data parsing failed cause unknown token at 1:1
at e.wbg.__wbg_new_15d3966e9981a196 (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:59785)
at wasm://wasm/005420d6:wasm-function[515]:0x112c4c
at wasm://wasm/005420d6:wasm-function[30]:0x3ffde
at new a7 (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:57743)
at new si (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:61382)
at sp (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:65344)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:68482)
}
Update 25.01. I get this error now
⨯ Error: failed to pipe response
at pipeToNodeResponse (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/pipe-readable.js:111:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextNodeServer.runEdgeFunction (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:1225:13)
at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:247:37)
at async NextNodeServer.handleRequestImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:807:17)
at async invokeRender (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:163:21)
at async handleRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:342:24)
at async requestHandlerImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:366:13)
at async Server.requestListener (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:140:13) {
[cause]: RuntimeError: memory access out of bounds
at wasm://wasm/005420d6:wasm-function[30]:0x3d9f3
at new a7 (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:57743)
at new si (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:61382)
at sp (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:65344)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:68482)
}
Live check (could work when you open, because I use force-dynamic
to check if it helps)
https://likeremote.com/remote-jobs/stripe-remote-job-staff-developer-advocate-developer-relations-7778/opengraph-image
The error from Cloudlfare side, just 502 error, for sure
Now I use export const dynamic = "force-dynamic";
not to generate cache version.
Expected: The cached open graph image showed correctly
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000
Binaries:
Node: 20.10.0
npm: 10.2.3
Yarn: 1.22.19
pnpm: 8.10.5
Relevant Packages:
next: 14.1.0
eslint-config-next: 14.0.4
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Dynamic imports (next/dynamic), Image optimization (next/image, next/legacy/image), Middleware / Edge (API routes, runtime)
Which stage(s) are affected? (Select all that apply)
Other (Deployed)
Additional context
No response
About this issue
- Original URL
- State: open
- Created 5 months ago
- Reactions: 8
- Comments: 18 (4 by maintainers)
I have created a repo to clearly demonstrate the issue.
First load of the image:
Load after it’s been loaded a number of times:
After a minute or so, the error occurs:
I’m running this on a machine with 128GB RAM and it’s getting nowhere close to the limit before it stops working:
I have the same problem in 14.1.3
When I use an SVG in an OG ImageResponse, it generates memory leaks and errors in a short period of time.
Error: SVG data parsing failed cause unknown token at 1:1
Edit: I have the problem without using SVG too.
thanks!
@ethteck Yes—it was likely fixed with this <picture data-single-emoji=":pr:" title=":pr:"></picture> → https://github.com/vercel/next.js/pull/62955, which is in https://github.com/vercel/next.js/releases/tag/v14.1.3 and above.
Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now.