React 18 `hydrateRoot` hydration failed with SSR
- 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.