Web assembly error with `@vercel/og`

[benjaminleonard]

What version of Remix are you using?

1.8.0

Steps to Reproduce

Install @vercel/og add the following line to your remix.config.js: serverDependenciesToBundle: ['yoga-wasm-web', '@vercel/og', 'satori'] and run npm run dev.

Expected Behavior

Developer server runs and the @vercel/og package works.

Actual Behavior

Receive the following error:

/Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/yoga-wasm-web/dist/index.js:1
import i from"./entry.js";import o from"./yoga.mjs";function s(e,t){return t}async function c(e){let t=await o({instantiateWasm(r,a){return WebAssembly.instantiate(e,r).then(n=>{a(n.instance||n)}),{}},locateFile(){return""}});return i(s,t)}async function l(e){let t=await o({instantiateWasm(r,a){return WebAssembly.instantiateStreaming(e,r).then(n=>{a(n.instance||n)}),{}},locateFile(){return""}});return i(s,t)}export{c as default,l as initStreaming};
                                                                                                                                                        ^
TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object
    at Object.instantiateWasm (/Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/yoga-wasm-web/dist/index.js:1:153)
    at /Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/yoga-wasm-web/dist/yoga.mjs:65:421
    at /Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/yoga-wasm-web/dist/yoga.mjs:66:356
    at c (/Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/yoga-wasm-web/dist/index.js:1:110)
    at Object.<anonymous> (/Users/leonard/Desktop/Development/vercel-og-wasm/node_modules/@vercel/og/src/og.ts:17:25)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

See the following repo to reproduce: https://github.com/benjaminleonard/vercel-og-wasm

[hgezim]

@benjaminleonard Did you figure out a solution here? Can you use vercel edge functions here?

[m5r]

Their documentation explicitly says that only their edge runtime is supported.

Only the Edge Runtime is supported. The default Node.js runtime will not work. To use Node.js or any other runtime, you can use Satori directly.

I've been working on a Node.js-friendly alternative today and it's turning out to be decent. Right now I just want to make sure I'm not infringing any license before sharing the code but while I figure this out, please let me know if it's something you would be interested in using.

[fedeya]

Vercel now supports the edge runtime for remix in production

I deployed a short example using @vercel/og to https://vercel-og-remix-fedeya.vercel.app here is the repo: https://github.com/fedeya/vercel-og-remix.

The only problem i found right now is getting it to work locally, i get this error when i request that route in local

Unexpected Server Error

TypeError [ERR_INVALID_URL]: Invalid URL

[m5r]

@fedeya could you try using @m5r/og? It's the same API so it should be a drop-in replacement.

The package's repo is hosted here: https://github.com/m5r/og

[ryanflorence]

Since this runs in production and we've had 10 minor releases since this issue was created, please let us know if there's anything Remix needs to do for this to work in dev too, or confirm that it works in dev now on the latest version. Thanks!