Handle props on Fragment error due to Symbol(react.lazy) (#3873)

This PR fixes an error where you get an error that props were forwarded
to a Fragment. This is because we forward props to the children in case
of a Fragment. We only do this to valid elements, but in some scenarios,
it could be that we receive a `Symbol(react.lazy)`.

Sometimes we also get a `Symbol(react.transitional.element)` but that
doesn't seem like an issue.

With this PR, we resolve the payload of fulfilled `react.lazy` elements.

Fixes: tailwindlabs/tailwind-plus-issues#1814


## Test plan

Tested this behavior in Catalyst.

Before:


https://github.com/user-attachments/assets/4389ffe4-9fd6-4fe9-b290-8edbc86eb94b



After:



https://github.com/user-attachments/assets/b6b34b47-e3d1-4e79-a0ef-f215ff141bc8

Author: RobinMalfait

package-lock.json

@@ -148,6 +148,11 @@ function _render<TTag extends ElementType, TSlot>(
     | ReactElement
     | ReactElement[]
 
+  // Unwrap `react.lazy` wrappers when the payload has already been fulfilled.
+  // This can happen with e.g. Next.js client-side navigations where the child
+  // element is wrapped in a lazy boundary from React Server Components.
+  resolvedChildren = resolveLazyElement(resolvedChildren)
+
   // Allow for className to be a function with the slot as the contents
   if ('className' in rest && rest.className && typeof rest.className === 'function') {
     rest.className = rest.className(slot)
@@ -467,6 +472,23 @@ function getElementRef(element: React.ReactElement) {
   return React.version.split('.')[0] >= '19' ? element.props.ref : element.ref
 }
 
+/**
+ * Resolve a `react.lazy` wrapper to the underlying element when the lazy
+ * payload has already been fulfilled. This handles the case where frameworks
+ * like Next.js wrap elements in lazy boundaries (e.g. during client-side
+ * navigation with React Server Components). If the payload isn't resolved
+ * yet, the original value is returned as-is.
+ */
+function resolveLazyElement(element: any): any {
+  if (element != null && element.$$typeof === Symbol.for('react.lazy')) {
+    let payload = element._payload
+    if (payload != null && payload.status === 'fulfilled') {
+      return resolveLazyElement(payload.value)
+    }
+  }
+  return element
+}
+
 export function isFragment(element: any): element is typeof Fragment {
   return element === Fragment || element === Symbol.for('react.fragment')
 }

packages/@headlessui-react/CHANGELOG.md

@@ -0,0 +1 @@
+.next

packages/@headlessui-react/src/utils/render.ts

@@ -0,0 +1,14 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { notFound } from 'next/navigation'
+
+export function PageLoader({ slug }: { slug: string }) {
+  let Component = dynamic(() => import(`../../page-examples/${slug}`))
+
+  if (!Component) {
+    notFound()
+  }
+
+  return <Component />
+}

playgrounds/react/.prettierignore

@@ -0,0 +1,16 @@
+import fs from 'fs'
+import { notFound } from 'next/navigation'
+import path from 'path'
+import { PageLoader } from './page-loader'
+
+export default async function CatchAllPage({ params }: { params: Promise<{ slug: string[] }> }) {
+  let { slug } = await params
+  let pagePath = slug.join('/')
+
+  let file = path.resolve(process.cwd(), 'page-examples', `${pagePath}.tsx`)
+  if (!fs.existsSync(file)) {
+    notFound()
+  }
+
+  return <PageLoader slug={pagePath} />
+}

playgrounds/react/app/[...slug]/page-loader.tsx

@@ -1,9 +1,9 @@
+'use client'
+
 import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
-import { useRouter } from 'next/router'
-import './styles.css'
-
 function disposables() {
   let disposables: Function[] = []
 
@@ -38,8 +38,7 @@ function disposables() {
   return api
 }
 
-export function useDisposables() {
-  // Using useState instead of useRef so that we can use the initializer function.
+function useDisposables() {
   let [d] = useState(disposables)
   useEffect(() => () => d.dispose(), [d])
   return d
@@ -128,33 +127,7 @@ function KeyCaster() {
   )
 }
 
-function MyApp({ Component, pageProps }) {
-  let router = useRouter()
-  if (router.query.raw !== undefined) {
-    return <Component {...pageProps} />
-  }
-
-  return (
-    <>
-      <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
-        <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
-          <Link href="/">
-            <Logo className="h-6" />
-          </Link>
-          <span className="font-bold text-white">(React)</span>
-        </header>
-
-        <KeyCaster />
-
-        <main className="flex-1 overflow-auto bg-gray-50">
-          <Component {...pageProps} />
-        </main>
-      </div>
-    </>
-  )
-}
-
-function Logo({ className }) {
+function Logo({ className }: { className?: string }) {
   return (
     <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
       <path
@@ -211,4 +184,26 @@ function Logo({ className }) {
   )
 }
 
-export default MyApp
+export function LayoutChrome({ children }: { children: React.ReactNode }) {
+  let searchParams = useSearchParams()
+  let raw = searchParams.get('raw') !== null
+
+  if (raw) {
+    return <>{children}</>
+  }
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden bg-gray-700 font-sans text-gray-900 antialiased">
+      <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-700 px-4 py-4 sm:px-6 lg:px-8">
+        <Link href="/">
+          <Logo className="h-6" />
+        </Link>
+        <span className="font-bold text-white">(React)</span>
+      </header>
+
+      <KeyCaster />
+
+      <main className="flex-1 overflow-auto bg-gray-50">{children}</main>
+    </div>
+  )
+}

playgrounds/react/app/[...slug]/page.tsx

@@ -1,9 +1,11 @@
-import { Head, Html, Main, NextScript } from 'next/document'
+import { Suspense } from 'react'
+import '../page-examples/styles.css'
+import { LayoutChrome } from './layout-chrome'
 
-export default function Document() {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Html>
-      <Head>
+    <html>
+      <head>
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -21,11 +23,12 @@ export default function Document() {
           sizes="16x16"
           href="https://headlessui.dev/favicon-16x16.png"
         />
-      </Head>
+      </head>
       <body>
-        <Main />
-        <NextScript />
+        <Suspense>
+          <LayoutChrome>{children}</LayoutChrome>
+        </Suspense>
       </body>
-    </Html>
+    </html>
   )
 }

playgrounds/react/pages/_app.tsx playgrounds/react/app/layout-chrome.tsxplaygrounds/react/pages/_app.tsx renamed to playgrounds/react/app/layout-chrome.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples'
+
+export default async function Page() {
+  let examples = await resolveAllExamples('page-examples')
+
+  if (examples === false) {
+    return <p>No examples found.</p>
+  }
+
+  return (
+    <div className="container mx-auto my-24">
+      <div className="prose">
+        <h2>Examples</h2>
+        <Examples examples={examples} />
+      </div>
+    </div>
+  )
+}
+
+function Examples(props: { examples: ExamplesType[] }) {
+  return (
+    <ul>
+      {props.examples.map((example) => (
+        <li key={example.path}>
+          {example.children ? (
+            <h3 className="text-xl capitalize">{example.name}</h3>
+          ) : (
+            <Link href={example.path} className="capitalize">
+              {example.name}
+            </Link>
+          )}
+          {example.children && <Examples examples={example.children} />}
+        </li>
+      ))}
+    </ul>
+  )
+}

playgrounds/react/pages/_document.tsx playgrounds/react/app/layout.tsxplaygrounds/react/pages/_document.tsx renamed to playgrounds/react/app/layout.tsx

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import './.next/dev/types/routes.d.ts'
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.