I am currently working on a project that utilizes NextJS and is deployed on Vercel. In an attempt to generate images, I am using the @vercel/og Open Graph Image generation library. However, each time the api route for the OG image is called, it leads to an ERR_MODULE_NOT_FOUND error. I have followed the documentation correctly, but still encountering this issue. Any assistance would be greatly appreciated. Thank you!
// File: /api/og/page.js
import { ImageResponse } from "@vercel/og"
export const config = {
runtime: "edge",
}
export default function () {
const { searchParams } = new URL(req.url)
// ?title=<title>
const hasTitle = searchParams.has("title")
const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "delilah"
return new ImageResponse(
(
<div
style={{
background: "linear-gradient(to bottom right, #246bd7 0%, #169680 30%, #169680 55%, #cc978d)",
backgroundSize: "100% 100%",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white",
padding: "50px",
textShadow: "0px 0px 1px black",
}}>
<img src="[img src here]" width={500} style={{ borderRadius: 20 }} />
<div style={{ marginLeft: 50, fontSize: 80, fontWeight: "bold", textShadow: "1px 1px 0px black" }}>
[site description]
</div>
</div>
),
{
width: 1200,
height: 630,
}
)
}
Error message received when accessing /api/og/page:
[GET] /api/og/page
10:05:26:94
2023-01-06T16:05:28.862Z f958bf58-52f7-449f-9a45-9e520b88eec9 ERROR Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/app/node_modules/@vercel/og/vendor/resvg.simd.wasm' imported from /var/task/app/node_modules/@vercel/og/dist/index.js
at new NodeError (node:internal/errors:393:5)
at finalizeResolution (node:internal/modules/esm/resolve:328:11)
at moduleResolve (node:internal/modules/esm/resolve:965:10)
at moduleResolveWithNodePath (node:internal/modules/esm/resolve:909:12)
at defaultResolve (node:internal/modules/esm/resolve:1173:79)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}