I've been experimenting with the @vercel/og package in order to set up an API route for generating open graph images.
As I work with an Astro application, I simply followed the vercel example that is framework agnostic:
// 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,
}
);
}
However, when I run vercel dev and try to access http://localhost:3000/api/og, I encounter a 500 Error stating "This Serverless Function has crashed.". Upon checking the console, I found this 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)
...
}
Any suggestions on resolving this issue? Thank you in advance
Update
It seems that the problem lies with the import statement itself. For example, using the following code snippet:
import { ImageResponse } from "@vercel/og";
export const config = {
runtime: "edge",
};
export default function () {
return new Response("Hello world!");
}
I encounter the same error. However, if I remove the import statement like this:
export const config = {
runtime: "edge",
};
export default function () {
return new Response("Hello world!");
}
The function runs without any issues. I suspect it has something to do with my local edge runtime, but I'm not sure how to resolve it yet.