BuilderIO / BuilderIO/builder

React 18 `hydrateRoot` hydration failed with SSR

Open
#1,229 4 comments 6 reactions 1 assignee Claimed by @teleaziz View on GitHub
needs-reproduction
Dominant language
TypeScript
Stars
8.8k
Forks
1.2k
Avg merge
1d 6h
Merged PRs (30d)
17

Description

Hey friends! Big fan of builder! I am running into an issue with builder and React 18. I am using Remix and Tailwind but I am very certain that it's React 18 that is causing the issue.

**Describe the bug**

React throws the following error when builder is used with React 18 and server-side rendering:

`Warning: React does not recognize the `builderState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `builderstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.`

The server-side rendered HTML loads fine (builder page looks as expected and builder style tags present). After hydration, React reports: `Hydration failed because the initial UI does not match what was rendered on the server.` Then the builder pages lose their styling (the emotion style tags disappear).

**To Reproduce**

Steps to reproduce the behavior:

1. Use React 18 and use `hydrateRoot`
2. Load builder both server and client-side
3. Throttle to slow 3G for better visibility
4. See how the builder page breaks after attempted hyrdation

My (Remix.run) client entry file:

```tsx
import { RemixBrowser } from '@remix-run/react';
import { hydrateRoot } from 'react-dom/client';
import { registerComponents } from './modules/builder-pages/registerComponents';

// registering builder components and calling builder init with public key
registerComponents();

// using React 18 hydrateRoot
hydrateRoot(document, );
```

**Expected behavior**

Builder works as expected after React hydration and doesn't loose the CSS properties.

The following non-React 18 client entry file works:

```tsx
import { RemixBrowser } from '@remix-run/react';
import { hydrate } from 'react-dom';
import { registerComponents } from './modules/builder-pages/registerComponents';

registerComponents();

hydrate(, document);
```

**Additional context**

- React v18.2.0
- Remix.run v1.6.5

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.