fix #600

src/layout.ts

@@ -12,6 +12,8 @@ import {
   buildXMLString,
   normalizeChildren,
   hasDangerouslySetInnerHTMLProp,
+  isReactComponent,
+  isForwardRefComponent,
 } from './utils.js'
 import { SVGNodeToImage } from './handler/preprocess.js'
 import computeStyle from './handler/compute.js'
@@ -79,7 +81,7 @@ export default async function* layout(
   }
 
   // Not a regular element.
-  if (!isReactElement(element) || typeof element.type === 'function') {
+  if (!isReactElement(element) || isReactComponent(element.type)) {
     let iter: ReturnType<typeof layout>
 
     if (!isReactElement(element)) {
@@ -90,11 +92,22 @@ export default async function* layout(
       if (isClass(element.type as Function)) {
         throw new Error('Class component is not supported.')
       }
+
+      let render: Function
+
+      // This is a hack to support React.forwardRef wrapped components.
+      // https://github.com/vercel/satori/issues/600
+      if (isForwardRefComponent(element.type)) {
+        render = (element.type as any).render
+      } else {
+        render = element.type as Function
+      }
+
       // If it's a custom component, Satori strictly requires it to be pure,
       // stateless, and not relying on any React APIs such as hooks or suspense.
       // So we can safely evaluate it to render. Otherwise, an error will be
       // thrown by React.
-      iter = layout((element.type as Function)(element.props), context)
+      iter = layout(render(element.props), context)
       yield (await iter.next()).value as { word: string; locale?: string }[]
     }
 

src/utils.ts

@@ -20,6 +20,14 @@ export function isClass(f: Function) {
   return /^class\s/.test(f.toString())
 }
 
+export function isForwardRefComponent(type: any) {
+  return type && type.$$typeof === Symbol.for('react.forward_ref')
+}
+
+export function isReactComponent(type: any) {
+  return typeof type === 'function' || isForwardRefComponent(type)
+}
+
 export function hasDangerouslySetInnerHTMLProp(props: any) {
   return 'dangerouslySetInnerHTML' in props
 }

test/react.test.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react'
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('React APIs', () => {
+  let fonts: any
+  initFonts((f) => (fonts = f))
+
+  it('should support `forwardRef` wrapped components', async () => {
+    const Foo = forwardRef(function _() {
+      return <div>hello</div>
+    })
+
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          color: 'red',
+          fontSize: 14,
+        }}
+      >
+        <Foo />
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+})