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.