We are experiencing an issue with dragging and dropping custom components into the page. After the dragging the component either does not appear on the page (untiul you manually refresh) or the whole page breaks. The error I’m seeing in the cosonle is “Objects are not valid as a react child (found object with keys {component})“ - this is being thrown from a Builder function `throwOnInvalidObjectTypeImpl`.
I tested this with the simplest custom component as per this Builder example and the issue persist. This is happening ONLY with the drag and drop action. If I add a custom component via the + sign - there are no issues whatsoever.
Builder content link
Builder public api key
b9d46b22b48540afa4cdea67f57a81df
What are you trying to accomplish
We want to be able to drag and drop custom components without the UI breaking
Screenshots or video link
Here is a video recording, displaying the issue
Here is a screenshot of the error:
Code stack you are integrating Builder with
React, vite
Hello @petya182,
Welcome to builder.io forum post.
We have addressed this on our end by enabling the following options in your space:
- Use debounced edits in content editor
Path: Settings → Advanced Settings → Performance
- Use patch updates
Path: Settings → Advanced Settings → Editor
After enabling these, dragging and dropping custom components appears to be working correctly. Could you please verify on your side and confirm that the issue is resolved?
That said, based on the error you shared (Objects are not valid as a React child), we strongly recommend reviewing your Builder integration setup as well as your custom component implementation. In many cases, this error is caused by a component returning an object instead of valid JSX, or by incorrect prop handling during live editor updates.
You can reference our integration guide here for best practices:
If the issue persists after verifying, feel free to share your integration snippet or component example and we’ll be happy to take a closer look.
