Satori does not work with components which are using forwardRef

[sdorra]

Bug report

Description / Observed Behavior

Satori does not render components which are using forwardedRef. For example FontAwesomeIcon.

Expected Behavior

Satori should render components which are using React.forwardRef.

Reproduction

The following demo uses the latest next.js canary and should show 👋 Hello World 👋, instead it renders only World 👋 the 👋 Hello uses a forwardRed and is not rendered.

https://github.com/sdorra/og-with-forwardRef

[sdorra]

I've already opened an issue at next.js, but i think it is more a satori bug than a next.js one.

[Yovach]

This issue also applies to this one #570

[kachkaev]

👋 @shuding! Could you please consider merging #601 to fix this issue? I am trying to use qrcode.react via next/og (i.e. @vercel/satori) but failed. The <svg> element does not render because of forwardRef in qrcode.react.

I guess that forwardRef will be eventually deprecated but it’s probably too early to ask maintainers to remove it for satori to work.

---

Another issue with satori that I noticed was incompatibility with useMemo:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
 ⨯ [Error: failed to pipe response] {
  [cause]: [TypeError: Cannot read properties of null (reading 'useMemo')]
}

I could overcome this locally by temporarily replacing React.useMemo(fn, deps) with (x => x())(fn, deps) . When I also removed forwardRef from node_modules → qrcode.react → esm/index.js, QR-codes finally rendered in satori.

The useMemo issue might be to do with React version mismatch between Next.js (resolved as built-in canary) and qrcode.react → peerDependencies (resolved as v19.0.0).

---

Both useMemo and forwardRef are compatible with server components, so it’d be great to see them working in satori too.