@vercel/og Open Graph Image Generation Fails - ERR_MODULE_NOT_FOUND

Question

I have a project that uses NextJS and deploys on Vercel. I'm trying to use the @vercel/og Open Graph Image generation library to generate images, but unfortunately, every time the api route for the OG image is invoked, it results in an ERR_MODULE_NOT_FOUND. I've set up everything correctly as described in the docs, so any help would be appreciated. Thanks!

// 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 I get when /api/og/page is opened:

[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'
}

Answer 1

Solved by updating NextJS to v12.2.3.