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.
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:
❌ Assigning
children
as a prop also doesn't work:✅ Any other prop does work:
The following error is thrown:
Expected Behavior
With
@vercel/og
I expect to be able to use functions as children.Reproduction
/app/route.tsx
Additional Context
Satori version, and any other context about the problem here.