Repository navigation
@vercel/og does not accept a function as a child (<Foo>{() => 'bar'}</Foo>) #519
Description
Bug report
Description / Observed Behavior
I originally posted this issue on vercel/next.js#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
- go to https://codesandbox.io/p/sandbox/serene-mclean-27v4mn?file=%2Fapp%2Froute.tsx%3A18%2C1-23%2C79
- see an image being served with the text "Hello from renderProp"
- Uncomment one of the broken test cases in the file
/app/route.tsx - reload image
- it won't load
Additional Context
Satori version, and any other context about the problem here.
Activity
Jackie1210 commentedon Aug 11, 2023
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 commentedon Aug 11, 2023
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.
sahithyandev commentedon Jul 27, 2026
@vercel/ogpackage is using satori 0.25.0 where as the online playground is probably using a later version. Satori's latest version is 0.29.0.@vercel/ogis shipping in compiled form which means we cannot useoverridesconfiguration in package.json to forcefully use 0.29.0.