React 18 SSR hydration failure in MeteorJS
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 44.8k
- Forks
- 5.2k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 25
Description
### Description
Hydration failed because the initial UI does not match what was rendered on the server.
- `You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it`.
- ` Warning: An error occurred during hydration. The server HTML was replaced with client content in
### Steps to reproduce
### Client Setup
```js
Meteor.startup(() => {
FastRender.onPageLoad(async () => {
const target = document.getElementById('react-root');
const root = createRoot(target);
const app = (
);
return !window.noSSR ? hydrateRoot(target, app) : root.render(app);
});
```
### Meteor Version
v2.7
### Operating System
- [X] macOS
- [ ] Windows
- [ ] Linux
### Additional Information
_No response_
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the client setup shown in the issue, focusing on FastRender.onPageLoad and the createRoot/hydrateRoot calls around the react-root element. Reproduce the React 18 SSR path and verify that hydration completes without the duplicate-root and server-content replacement warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100