@vercel/og is broken for Astro

[kacase]

Page to Investigate

https://www.npmjs.com/package/@vercel/og?activeTab=versions

Steps to Reproduce

Using the @vercel/og package in conjunction with Astro causes issues.

Please find below a description of the problem as well as a proposed solution.

Importing and using ImageResponse and building raises the following issue:

/Users/eao/Documents/projects/blog/node_modules/wrangler/wrangler-dist/cli.js:29747
            throw a;
            ^

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: Error: not implemented... yet...
    ...
      at mainFetch (node:internal/deps/undici/undici:10926:11)
      at fetching (node:internal/deps/undici/undici:10883:7)
      at fetch2 (node:internal/deps/undici/undici:10761:20)
      at Object.fetch (node:internal/deps/undici/undici:11574:18)
      at fetch (node:internal/process/pre_execution:229:25)
      at eval (.../node_modules/@vercel/og/dist/index.edge.js:18987:20)
      at async instantiateModule (.../node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53408:5)
}

Which relates to the following lines from src/index.edge.ts

// src/index.edge.ts
var initializedResvg = initWasm(resvg_wasm);
var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Rl(yoga2));
// var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());
var ImageResponse = class extends Response {
  constructor(element, options = {}) {
    const result = new ReadableStream({
      async start(controller) {
        await initializedYoga;
        await initializedResvg;
        // const fontData = await fallbackFont;
        const fonts = [
          // {
          //   name: "sans serif",
          //   // data: fontData,
          //   weight: 700,
          //   style: "normal"
          // }
        ];
        const result2 = await render(wl, resvg_wasm_exports, options, fonts, element);
        controller.enqueue(result2);
        controller.close();
      }
    });
    super(result, {
      headers: {
        "content-type": "image/png",
        "cache-control": process.env.NODE_ENV === "development" ? "no-cache, no-store" : "public, immutable, no-transform, max-age=31536000",
        ...options.headers
      },
      status: options.status,
      statusText: options.statusText
    });
  }
};

There seems to be some issue with the fetch call for the fallback font.

Removing the fetch call or inlining the font solves the issue. As can be seen with the commented code above.

I would suggest the following:

Remove usage of fetch() by inlining font.

 var fallbackFont = Buffer.from("FONT BASE 64", "base64")

This way no more fetch is required and the issue is solved.

[kacase]

Also see: https://stackoverflow.com/questions/76160457/getting-typeerror-fetch-failed-when-trying-to-use-vercel-og-with-astro/78674938#78674938

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community