Bug: Column is not working with RSC

[veej]

Description of the bug

Trying to bootstrap a new Next.js application with App Router, and using Columns in a server component (e.g. a layout), it seems the width set on explicit Column components is ignored. E.g.

<Columns space={0}>
   <Column width="1/3">
       ....
   </Column>
   <Column width="2/3">
      ...
   </Column>
</Columns>

The code above will result in two Columns splitting the available space in half, instead of respecting the 1/3 - 2/3 proportion.

Inspecting the generated HTML code, it seems the Column component with the right flex-basis is wrapped in another Column, as if bento is not able to recognize the child is a Column:

It seems, for reasons, the isColumn function to detect if a child of Columns is a Column doesn't work as expected with RSC.

Playroom reproduction

No response

Version

0.22.9

What browsers are you seeing the problem on?

Chrome

[pedrodim]

React replaces every server component with a lazy node so the check on child.type === Column doesn't work.

7 = Columns; 8 = Column

Probably the check should check for lazy nodes generated by RSC as well as normal nodes as suggested here. Keep in mind the solution on stackoverflow already doesn't work as the _payload's value has already changed (before object, now array), meaning any React update could break the check again.

Lazy node's type, note _payload.value.

Importing the Column component with an alias, like import { Column as C } from '...', doesn't reflect on the payload so we can assume it is safe to check the string "Column".

As a side note, the check doesn't work on lazy elements (using React.lazy) but that's expected, and this fix wouldn't fix it as the payload doesn't contain any reference to what is being loading.