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

[Thisisjuke]

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"
}

[Thisisjuke]

Hi !
I removed it because with it added, I couldn't build the application, I had the following error:

> Build error occurred
[Error: ENOENT: no such file or directory, open '/path/website/.next/server/pages/api/og.js.nft.json'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/path/website/.next/server/pages/api/og.js.nft.json'
}

I had to rename og.tsx to og.jsx. Now it's working fine : I can now build and visite /api/og

I have updated the bug repository but it's working fine with both tsx and jsx.

How can I fix this in my own repository ?

Only difference might be inside next.config.js but still not working by removing withPlaiceholder(nextConfig);

next.config.js

const { withPlaiceholder } = require("@plaiceholder/next");

const nextConfig = {
  publicRuntimeConfig: {},
  images: {
    domains: ["picsum.photos"],
  },
};

module.exports = withPlaiceholder(nextConfig);

ERRATUM :

Seems to work locally using yarn build && yarn start but it's not working inside Vercel.
My website is well deployed (no error on vercel during build) but going to /api/og raise a 500 error.

[Thisisjuke]

@balazsorban44 should I reopen a new Issue referencing this one ? (cause it's not tracked anymore)

[brightonmike]

Having exactly the same issue too.
#41968 (comment)
Doesn't resolve the problem, it makes no difference.

[balazsorban44]

@brightonmike please open a new issue with a reproduction.

[audn]

@brightonmike @Thisisjuke did you end up fixing it?

I got it working when built (https://css-app-git-vercel-og-audn.vercel.app/api/og) - but not on localhost..

[Thisisjuke]

Hey @audn

I opened another thread about a related issue of this one: #42899 which is also a duplicate of another issue: #42899.

Maybe you will be able to find anything you need in one of those.

On my side, just updating to "next": "^13.0.3-canary.4", fixed the issue, without any code modification
I also have this snippet in api/og.tsx :

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

Hope you will fix your issue ✌️

[audn]

Hi @Thisisjuke,
I made an issue here vercel/examples#468.

Also tried updating to "next": "^13.0.3-canary.4" without luck :/ Do you have a repo I could clone and test?

[Thisisjuke]

I don't had this issue / error code during the time it was not working on my app.

There is this bug reproduction repository (on branch repro/issue-42899) : https://github.com/Thisisjuke/nextjs-og-next13-bug-reproduction/tree/repro/issue-42899

Try to put your code / mocked code inside api/og.tsx

Also, there was / there is a bug with output: "standalone" (needed for self-hosted docker for example). So you can also try by removing output: "standalone", inside next.config.js

I also saw your comment on stack overflow and I don't have any experiences with --experimental-wasm-simd sorry.

Maybe you can clone/fork my reproduction repo, add your things relative to @vercel/og and push ? If you have the same error i'll then try to run it in my Linux Distribution + node version to see if I have the same error

[Thisisjuke]

If you come to this issue while you have issues with Error: ENOENT: no such file or directory, open '/path/website/.next/server/pages/api/og.js.nft.json', it has been fixed in this MR : #43746

You can update to next v13.0.7.

[DuCanhGH]

@Thisisjuke it is actually #43326 but cheers :)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.