next.js: Open graph image. SVG data parsing failed cause unknown token at 1:1

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/amazing-easley-s8cw85?file=%2Fapp%2F[slug]%2Fopengraph-image.tsx%3A48%2C18

To Reproduce

  1. Self-hosted NGINX server
  2. Cloudflare CDN
  3. Build app
  4. Upload to self host
  5. 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 image

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)

Most upvoted comments

I have created a repo to clearly demonstrate the issue.

First load of the image: image

Load after it’s been loaded a number of times: image

After a minute or so, the error occurs:

 ⨯ Error: failed to pipe response
    at pipeToNodeResponse (/og/my-app/node_modules/next/dist/server/pipe-readable.js:111:15)
    at async sendResponse (/og/my-app/node_modules/next/dist/server/send-response.js:40:13)
    at async doRender (/og/my-app/node_modules/next/dist/server/base-server.js:1347:25)
    at async cacheEntry.responseCache.get.routeKind (/og/my-app/node_modules/next/dist/server/base-server.js:1527:40)
    at async DevServer.renderToResponseWithComponentsImpl (/og/my-app/node_modules/next/dist/server/base-server.js:1447:28)
    at async DevServer.renderPageComponent (/og/my-app/node_modules/next/dist/server/base-server.js:1844:24)
    at async DevServer.renderToResponseImpl (/og/my-app/node_modules/next/dist/server/base-server.js:1882:32)
    at async DevServer.pipeImpl (/og/my-app/node_modules/next/dist/server/base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (/og/my-app/node_modules/next/dist/server/next-server.js:269:17)
    at async DevServer.handleRequestImpl (/og/my-app/node_modules/next/dist/server/base-server.js:791:17)
    at async /og/my-app/node_modules/next/dist/server/dev/next-dev-server.js:331:20
    at async Span.traceAsyncFn (/og/my-app/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (/og/my-app/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async invokeRender (/og/my-app/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/og/my-app/node_modules/next/dist/server/lib/router-server.js:353:24) {
  [cause]: Error: 
      at imports.wbg.__wbg_new_15d3966e9981a196 (file:///og/my-app/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:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18347:12)
      at new Resvg2 (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18563:5)
      at render (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18783:19)
      at async Object.start (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:19006:25)
}

I’m running this on a machine with 128GB RAM and it’s getting nowhere close to the limit before it stops working: image

+1
mkst on Mar 27, 2024

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.

Captura de pantalla 2024-03-26 a las 9 08 38

+1
jnm733 on Mar 26, 2024

thanks!

+1
ethteck on Mar 13, 2024

@ethteck Yes—it was likely fixed with this <picture data-single-emoji=":pr:" title=":pr:">: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.

+1
samcx on Mar 13, 2024

Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now.

+1
rusakovic on Mar 11, 2024
Read more comments on GitHub
← next.js: OOM on 9.3.6
next.js: operation not permitted →