vercel / satori

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

`@vercel/og` does not accept a function as a child (`<Foo>{() => 'bar'}</Foo>`) #519

Open klaasman opened 1 year ago

klaasman commented 1 year ago

Bug report

Description / Observed Behavior

I originally posted this issue on https://github.com/vercel/next.js/issues/52394 but I think satori is the right place for this bug report

The @vercel/og library does not support using a function as children.

❌ For example this won't work:

<Test>{() => <p>Hello from children() as child</p>}</Test>

❌ Assigning children as a prop also doesn't work:

<Test children={() => <p>Hello from children() as prop</p>} />

✅ Any other prop does work:

<Test renderProp={() => <p>Hello from renderProp()</p>} />

The following error is thrown:

error unhandledRejection: Error [TypeError]: Cannot read properties of undefined (reading 'children')
    at n (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:15039:29)
    at n (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:15039:77)
    at file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:15039:69
    at Array.map (<anonymous>)
    at n (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:15039:58)
    at pu (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:15042:10)
    at xl (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:17132:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async render (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:18709:15)
    at async Object.start (file:///workspace/node_modules/next/dist/compiled/@vercel/og/index.node.js:18753:25) {
  digest: undefined
}

Expected Behavior

With @vercel/og I expect to be able to use functions as children.

Reproduction

  1. go to https://codesandbox.io/p/sandbox/serene-mclean-27v4mn?file=%2Fapp%2Froute.tsx%3A18%2C1-23%2C79
  2. see an image being served with the text "Hello from renderProp"
  3. Uncomment one of the broken test cases in the file /app/route.tsx
  4. reload image
  5. it won't load

Additional Context

Satori version, and any other context about the problem here.

Jackie1210 commented 1 year ago

I tested it and it looks fine?

https://og-playground.vercel.app/?share=bVPBjpswEP2VkaVqEwmVdNXDCiXpIbtp99CqUvdSiYuDh-DU2Mg2zVLEv3cMmwCrXGKGN-_NC2_csswIZAmLY9hzpQ48-wO50d4B1wKeSnOSwC2CaDQvZUYtDSjDBYpUEye3poSvxhwVwv5K2z3-cCA1-EI6EFiaj6nu23-bGjKugStnwKKvLT1DXuvMS6MhM2VlNGo_kBEqxZujNbUWpLBYwmYLbaphZLyg84sWskIqYVFHJKoF2p_WVNAth2a4TFoMFcBayL_gfKNw07ZCujAmgbtc4esddN320gfQTvS-TMTJS3Kdulh2V-WYpN_4y3AQEo65gzD_wrjYGGe-MxSNSKgfpcX-vxOeGVWXetpRoDwWnqBPq9WHKXCWwhc33ldcCKmPPVK9wj39TOFT7bzMmx1FS7GEkXSgnZkibE-7oYLj54BGkLLvnB4kV_CcGe1S9p7xS_7DBO4fJq_D7g1h74wyltTOhfQ4MrvrZ74mtA4LMMll0w5bsq6231ApMyzoNLd1XG07iOcK25u0MV_gbqh69jruOXMPl-bbDuZSFTmZ-xj3hramA0g1i5ipQs6OJS3r42PJw2oVsSFjlnwOhcBDfWRJTjcKI0ZX7SRfmircaH_uK9IJ3_upPKBgibc1dhHz_EAdRfB3NlYJ1v0H

klaasman commented 1 year ago

Yep I noticed too the playground seems to accept it, but it won't work when it's ran via next.js - see attached codesandbox.