@vercel/og : Unknown file extension ".wasm" for node_modules/@vercel/og/vendor/resvg.simd.wasm

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #59-Ubuntu SMP Fri Sep 9 09:37:59 UTC 2022
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next build (to test in local) / Vercel + github

Describe the Bug

When I build and/or deploy my website sur Vercel (build well no problem), and then I go to mywebsite.com/api/og, I have the following Error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".wasm" for /path/website/node_modules/@vercel/og/vendor/resvg.simd.wasm
    at new NodeError (node:internal/errors:371:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:87:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:102:38)
    at defaultLoad (node:internal/modules/esm/load:21:14)
    at ESMLoader.load (node:internal/modules/esm/loader:359:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

./api/og.jsx:

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

const font = fetch(
  new URL("../../assets/fonts/SourceSansPro-SemiBold.ttf", import.meta.url)
).then((res) => res.arrayBuffer());

export default async function () {
  const fontData = await font;

  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          fontFamily: '"SourceSansPro"',
          backgroundImage:
            "radial-gradient(circle, rgb(79,70,229) 0%, rgb(49, 46, 129) 100%)",
        }}
      >
          test
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "SourceSansPro",
          data: fontData,
          style: "normal",
        },
      ],
    }
  );
}

Expected Behavior

I can see the OG card like I do during development: it’s working when I use next dev

Link to reproduction

https://github.com/Thisisjuke/nextjs-og-next13-bug-reproduction

To Reproduce

• yarn
• yarn dev
• Go to localhost:3000/api/og : you can see the OG card or have the error
• yarn build
• yarn start
• Go to localhost:3000/api/og : you should have an error

[balazsorban44]

Hi, you are missing the runtime config:

export const config = {
  runtime: "experimental-edge"
}

[DuCanhGH]

@Thisisjuke it is actually #43326 but cheers 😃