Custom code with data binding not rendering properly server side
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 1.2k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 17
Description
**Describe the bug**
We have a Builder page that has an element with an HTML attribute that is bound to a custom code block. This works fine when rendered client side and results in something like `data-swiper-options="{"some": "json"}` but when it's rendered server side it results in `data-swiper-options="[object Object]"`. This poses a problem because we're mounting `BuilderComponent` client-side using `hydrate` and it's not re-rendering the HTML so `data-swiper-options="[object Object]"` remains.
**To Reproduce**
Steps to reproduce the behavior:
1. Create a builder page that includes an element with an HTML attribute that is bound to custom code that looks like:
```js
const options = `{
"some": "json"
}`
export default options;
```
2. Render this page server side using `@builder.io/react` version `8.0.9` (we're just using Node `20.18.3` with `renderToString`)
3. 💥 See that the HTML produced does not properly return executed custom code but instead `[object Object]` -- presumably a representation of the actual custom code instead of the result of it's execution.
**Expected behavior**
Custom code should be executed server side resulting in the proper HTML output.
**Additional context**
I've created a page where this is reproducible in my Builder space here: https://builder.io/content/f8608641b0604e938a2a50965af27017/edit
I've noticed that this _does_ work when the page is rendered using the HTML API, so theoretically this should be supported.
I've noticed that this scenario also seems to break the JSX editor in the Builder editor. It results in the following when you click "Toggle JSX Editor":
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.