vercel / satori

Enlightened library to convert HTML and CSS to SVG
https://og-playground.vercel.app
Mozilla Public License 2.0
10.95k stars 240 forks source link

@vercel/og will not work on edge outside of next - noto-sans-v27-latin-regular.ttf #582

Open jdgamble555 opened 8 months ago

jdgamble555 commented 8 months ago

Bug report

Description / Observed Behavior

The Vercel Docs show an example where vercel/og should work on other frameworks on the edge:

However, when you deploy vercel/og on the edge using anything other than next, you get this error:

Error: The Edge Function "fn" is referencing unsupported modules:
--
10:35:14.868 | - index.js: vc-blob-asset:./noto-sans-v27-latin-regular.ttf

This seems to be a problem with /dist/index.edge.js on this line (18983):

var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url))
.then((res) => res.arrayBuffer());

Which I believe is related to src/index.edge.ts file.

Expected Behavior

It should deploy without problems on the edge and display the image correctly as in development environments.

Reproduction

https://github.com/jdgamble555/sveltekit-vercel-og

Change the runtime to use edge:

https://github.com/jdgamble555/sveltekit-vercel-og/blob/master/src/routes/og/%2Bserver.ts#L8

Additional Context

https://github.com/orgs/vercel/discussions/5250 https://github.com/vercel/next.js/issues/59853 https://github.com/sveltejs/kit/discussions/11638 https://github.com/cloudflare/pages-plugins/issues/36 https://github.com/etherCorps/sveltekit-og/discussions/41

jsbrain commented 8 months ago

Facing the same problem, I think this has to do with the next v14 because it did work before and there are already plenty solutions that used to work.

As a matter of fact I tried all of them and it just won't work even when supplying a custom font it will still try to load noto-sans and crash.

jdgamble555 commented 8 months ago

Hey guys, this is a huge problem. Could you guys please look at this, as it makes several other repos not work!

J

jdgamble555 commented 7 months ago

Can we please get this looked at!

The Edge Function "fn" is referencing unsupported modules: - index.js: vc-blob-asset:./noto-sans-v27-latin-regular.ttf

This is a HUGE problem and effects many repos!!!

J

RickRyan26 commented 7 months ago

I too would love for this to work

NickMandylas commented 5 months ago

For those who come across this issue in app router, a work-around is to install @vercel/og, and import the ImageResponse class from there, instead of importing from next/og.

didier commented 3 months ago

@leerob This seems like such a simple fix that would unblock so many repos. Please give an update on this.