[all components] `render` prop doesn't work with async components

[nestarz]

Actual behavior

The render API doesn't work reliably with Server Components. It somehow works to some extent, but when render prop is declared with async or have a call to use(promise) internally, then the rendering fails.

Expected behavior

render prop should work reliably everywhere.

Related issues

• Link dont work with render from base-ui in server components amannn/next-intl#2030
• asChild doesn't work with async components radix-ui/primitives#3165
• Link component fails to render when parent uses asChild prop amannn/next-intl#1322

[mj12albert]

@nestarz Thanks for reporting this ~ would you mind making a repro? e.g. CodeSandbox/stackblitz 🙏

[nestarz]

My pleasure, here @mj12albert a MRE http://stackblitz.com/github/nestarz/base-ui-mre-lazy-render-issue

[atomiks]

from: @michaldudak - neither the shorthand or function version work

The short version of the renderProp (render={<div />}) relies on cloneElement and you can't do this across client/server boundary. The function version also won't work as you can't pass a fn from a server to a client.

Workaround: amannn/next-intl#1322 (comment)

Maybe there's something we can do though. This seems to be a patch made for asChild in Radix:

diff --git a/dist/index.js b/dist/index.js
index 39b589364a894882efa43c8d162a44d68c6fa58f..3c6c4fa336980a41d0acce0ab597d0bef74511b5 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -46,7 +46,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
   const Slot2 = React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
+    let { children, ...slotProps } = props;
+    if (children?.$$typeof === Symbol.for("react.lazy")) {
+      children = React.use(children._payload);
+    }
     const childrenArray = React.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
diff --git a/dist/index.mjs b/dist/index.mjs
index 510e77fc0471abe017279f39c87ecded59c41954..6d8dfd3cbfc434506c511ba1347d24a0a5ada954 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -30,7 +30,10 @@ var Slot = /* @__PURE__ */ createSlot("Slot");
 // @__NO_SIDE_EFFECTS__
 function createSlotClone(ownerName) {
   const SlotClone = React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
+    let { children, ...slotProps } = props;
+    if (children?.$$typeof === Symbol.for("react.lazy")) {
+      children = React.use(children._payload);
+    }
     if (React.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);

[nestarz]

@atomiks this is the workaround I use and would love to have this built-in in the meantime of having a more robust solution that doesn't rely on hidden, unstable props.

[rikbrown]

It would be great if it at least throw a clear error if used like this.
In Next.js this actually seems to work in dev builds but not in prod builds - which as you can imagine, is very annoying.