2

I am trying to use the @vercel/og package to create an api route to generate open graph images.

I have an Astro application and basically copied the framework agnostic vercel example:

// api/og.ts
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

When running vercel dev and trying to access http://localhost:3000/api/og I get a 500 Error "This Serverless Function has crashed.". Upon console inspection this is the error:

TypeError: fetch failed
    at Object.processResponse (evalmachine.<anonymous>:7941:27)
    at evalmachine.<anonymous>:8271:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) {
  cause: Error: not implemented... yet...
      at makeNetworkError (evalmachine.<anonymous>:6735:35)
      at schemeFetch (evalmachine.<anonymous>:8238:18)
      at evalmachine.<anonymous>:8115:26
      at mainFetch (evalmachine.<anonymous>:8134:11)
      at fetching (evalmachine.<anonymous>:8088:7)
      at Agent2.fetch (evalmachine.<anonymous>:7953:20)
      at fetch (evalmachine.<anonymous>:11747:40)
      at evalmachine.<anonymous>:18606:20
      at Script.runInContext (node:vm:141:12)
      at runInContext (node:vm:291:6) {
    [cause]: undefined
  }
}

Any ideas on how to solve this? Thanks in advance

Update

Apparently the issue is caused by the import statement itself. If i do something like this

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export default function () {
  return new Response("Hello world!");
}

I get the same error, however, removing the import like so:

export const config = {
  runtime: "edge",
};

export default function () {
  return new Response("Hello world!");
}

Makes the function run fine. My guess is that it has something to do with my local edge runtime, but I still don't exactly know how to fix it.

Axel Padilla
  • 143
  • 7

0 Answers0