Using 'children' as a slot results in errors

Hi @lauriii

In React, "children" is a reserved prop that automatically holds any nested content. When you reuse it as a slot name in Experience Builder, it can conflict with React’s built‑in handling and lead to unexpected undefined values.
I think To fix this, rename the slot name.

Yes, children is a reserved prop in React, and using it as a slot name in Experience Builder is causing conflicts.
I am exploring this issue and trying to understand the best way to fix it. If anyone has suggestions on the correct approach for renaming the slot, I would like to learn more.

I'm wondering if we could allow using children as a slot similar way to how it's allowed in React? We could have special behavior attached to it so that instead of showing the slot in the layers panel, the children would appear as direct children of the parent.

Tagging per #4 + #5.

Thanks to 📌 Constraint slot names allowed by XB in its component tree Active , this is now trivial to prevent until a time where we choose to do #5.

So, tightening scope here:

1. away from @lauriii's proposal in #5, which can happen in a follow-up (tagging!)
2. to only disallow the slot name(s) that we know to cause problems

Asking @balintbrews as the architect to check whether he agrees with this direction.

Note: technically, children would be a fine slot name for any non-React-powered component. So in principle, this should be applied not to ValidSlotName (which is used by Components for its per-revision fallback metadata, by ContentTemplate for exposed slot names, and also by code components, experience_builder.js_component.* to be precise).

But this seems reasonably pragmatic: with a handful LoC, it's guaranteed to prevent the reported "JS errors when using this code component" bug (you'd get a validation error when creating such a code component), and doesn't get in the way of anything else. We could choose to in the future allow children as the slot name everywhere else, but this is both correct and simple.

Just discussed with @balintbrews — he's +1 to the approach here, which is good, because … I seem to have accidentally merged this as part of the MR for 🐛 JavaScriptComponent CSS libraries should depend on AssetLibrary libraries Active 😱😇

Marking as , to convey it's done, and it only needs that follow-up to be created. @balintbrews said he'd like to do that.

wim leers → closed merge request !1168

I created 📌 Support designating a code component slot as the React component's `children` prop to allow JSX nesting Active .