[🐛 Bug]: `@vercel/og` doesn't work

Question

[🐛 Bug]: `@vercel/og` doesn't work

Opened this issue 2 years ago · 22 comments

I'm having issues getting my project to successfully deploy on Cloudflare because I am relying on a dependency (@vercel/og) which uses satori/wasm.

The Vercel building process goes fine but when next-on-pages gets to build the final worker bundle , esbuild fails with error:

✘ [ERROR] Could not resolve "/wasm/wasm_53adb396180a95eb122a0218c93e3d6474b1a27e.wasm"

Any idea on how this could get resolved?

Answer 1 · 2022-12-30T17:16:39.000Z

We don't currently support Wasm in Pages Functions, but we hope to add this soon. We'll update this issue when we get around to this.

Answer 2 · 2023-02-25T22:31:45.000Z

Is there any workaround/update?

Answer 3 · 2023-04-25T19:31:51.000Z

Note

This issue is blocked by: #202 and cloudflare/pages-plugins#30

Most likely solving the two issues above should in turn also solve this one

Answer 4 · 2023-05-03T16:40:32.000Z

Ahh okay. Thanks :)

Answer 5 · 2023-05-03T20:46:12.000Z

No problem, sorry this is taking so long 😓, I'll definitely look into #202 soon (likely this or next week), I'll try to also get the pages-plugins one solved soon-ish as well 🙂

Answer 6 · 2023-05-19T10:09:42.000Z

#202 has been resolved, so now it should just be the pages-plugin one that needs addressing 🙂

Answer 7 · 2023-05-22T22:04:07.000Z

Sorry I misunderstood things, we don't necessarily want to force developers to use the vercel-og pages plugin, so that is not blocking this

@vercel/og anyways isn't yet currently working on next-on-pages, so that is indeed something we need to fix

in any case I'm going to update the issue title as it is now unrelated to wasm (and also that it contains @vercel/og so that people having troubles with it can more easily notice this issue)

Answer 8 · 2023-06-09T17:32:06.000Z

Have been following a couple of different issue thread but the current stat is unclear to me. At the moment, is there any workaround or way to use either @vercel/og or @cloudflare/pages-plugin-vercel-og/api?

Answer 9 · 2023-06-09T18:04:23.000Z

Hi @lucaswalter, no I'm sorry, I had a quick look some time ago but haven't dug much into it since, so it's still unresolved 😓

Answer 10 · 2023-06-12T19:40:40.000Z

Thanks for the update @dario-piotrowicz — Do you know what the main blocker is for this? I would like to make use of this for my projection on Pages, but am not sure where else to follow for status updates.

Answer 11 · 2023-06-13T10:55:01.000Z

@lucaswalter as far I know there actually isn't a real blocker, it's just a matter of finding the time to dig into what the issue with vercel/og actually is.

it's been a few weeks so I don't remember precisely, but I think there was something Vercel does that we need to reverse engineer and fix/adapt to our runtime.

Sorry, I haven't put too much priority into this since being related to a Vercel library so it's not a core issue with Next per se, I'll try to dig into this soon (this or next week) 🙇

PS: I'll post status updates here

Answer 12 · 2023-06-23T00:26:11.000Z

Understood, thanks a ton @dario-piotrowicz

Answer 13 · 2023-06-23T15:43:02.000Z

No problem @lucaswalter 🙂

Check out #325 we're very close! 😄 (feel free to try out the next-on-pages prerelease and let me know if it works for you if you want)

Answer 14 · 2023-07-04T14:58:07.000Z

Thanks @dario-piotrowicz — Will keep following along

Answer 15 · 2023-07-14T09:46:44.000Z

@lucaswalter I've merged the PR so @vercel/og should now work 🙂

See the example I added in the PR's description: https://a9aeda25.next-on-pages-test-5h3.pages.dev/

As you can see (third link) now @vercel/og should work, unfortunately it seems like in certain cases
we can get an error (second link), I believe that that is a runtime bug and I will check with the runtime team about it,
so let's keep this issue open a bit longer, so I will let you know here when that is also sorted out

(PS: you can check in the latest beta release if @vercel/og works for your use case)

Answer 16 · 2023-07-14T15:22:33.000Z

This is awesome, thank you!

Answer 17 · 2023-12-30T21:09:16.000Z

I'm closing the issue since I could not reproduce it using the demo app anymore (and also the deployment link above seems to be working totally fine)

I did try to re-deploy the app multiple times (since in the past I saw this happen sporadically on deployments of the same app), none of the deployment presented the issue:

So hopefully the problem should have completely gone away 🙂🤞

Answer 18 · 2024-02-12T21:13:12.000Z

Hey unfortunately I am facing a very similar (if not the same) issue.

npx next build runs perfectly fine.. I suspect @cloudflare/next-on-pages is to blame..

▲  Traced Next.js server files in: 274.752ms
▲  Created all serverless functions in: 626.293ms
▲  Collected static files (public/, static/, .next/static): 4.955ms
▲  Build Completed in .vercel/output [12s]
⚡️ Completed `npx vercel build`.
⚡️ Unexpected error: ENOENT: no such file or directory, copyfile '/Users/tomaspietravallo/Documents/PROJECT/.vercel/output/functions/api/og.func/wasm/wasm_ef4866ecae192fd87727067cf2c0c0cf9fb8b020.wasm' -> '/Users/tomaspietravallo/Documents/PROJECT/.vercel/output/static/_worker.js/__next-on-pages-dist__/wasm/wasm_ef4866ecae192fd87727067cf2c0c0cf9fb8b020.wasm'

I am trying to use @vercel/og to generate images for og

import React from "react";
import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";
import type { NextRequest } from "next/server";

export const runtime = 'edge';

export async function GET(request: NextRequest){
  return new ImageResponse(
    <Component/>,
    {
      width: 800,
      height: 400,
      status: 200,
      debug: false,
    }
  ) as Response;
};

This happens when trying to use ImageResponse from either @cloudflare/pages-plugin-vercel-og/api (like the docs suggest), @vercel/og or next/og

Answer 19 · 2024-02-12T21:15:54.000Z

Ps the second link on the deployment you shared @dario-piotrowicz is not working "Example of vercel/og usage (which relies on wasm)" returns "internal server error" for me

Answer 20 · 2024-02-12T23:02:39.000Z

Ps the second link on the deployment you shared @dario-piotrowicz is not working "Example of vercel/og usage (which relies on wasm)" returns "internal server error" for me

@tomaspietravallo Thanks a bunch for letting me know 🙏
(PS: when I wrote my comment above with all those deployments all of them worked fine including the one you shared... now I also go get the internal server errors 😓)

This issue is quite bothersome as it has to be something runtime related... and it looks like the issue appears and disappears... making it very difficult to understand what's going wrong! 😓
I'll have to try to see if anything can be done regarding it 😓

Answer 21 · 2024-02-12T23:06:15.000Z

Hey unfortunately I am facing a very similar (if not the same) issue.

npx next build runs perfectly fine.. I suspect @cloudflare/next-on-pages is to blame..

Yes I'd say that your issue is not the same... could you possibly create a new issue? with also a minimal reproduction? 🙏

Answer 22 · 2024-02-12T23:07:28.000Z

I'm sure they did work. I hope you are able to find the cause, I'll be around to run any tests you might need help with.

For whatever reason the custom font example on your site DOES work (im assuming old deployment/version) https://17cb6ed0.next-apps-for-testing.pages.dev/api/og-custom

I'll open a new issue, hopefully I'll get a minimal example ready by tomorrow