CODEWITHSUNDEEP
reactjsremix.runhydration
Marshall
Marshall

Reputation: 57

Why does the project initialized with Remix's Indie stack get the error Hydration failed in Devtools?

When I was learning Remix, I followed the tutorial to initialize a project, but when I opened Devtools, I saw several errors reported on the console.
Warning: Did not expect server HTML to contain a <div> in <html>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.*n
The most ridiculous thing is that I opened the index page of Remix and its home page reported the same error, so I was especially curious about whether the hydration was successful and why this error happened

Upvotes: 2

Views: 886

Answers (1)

Richard Scarrott
Richard Scarrott

Reputation: 7063

This is a well known React issue caused by browser extensions modifying the DOM.

It's more pronounced in Remix because it hydrates the entire <html />, not just a <div id="root" />.

You can confirm whether it's caused by a browser extension by testing with a browser profile which has no extensions installed (or incognito mode).

Kiliman has a workaround demonstrated here https://github.com/kiliman/remix-hydration-fix which involves rendering the head and the app separately.

Upvotes: 4

Related Questions