Why do I get a "Hydration failed" error when initializing a project using Remix's Indie stack in Devtools?
P粉476475551
2023-08-30 00:12:22
<p>When I was learning Remix, I initialized a project according to the tutorial, but when I opened Devtools, I found that several errors were reported in the console. </p><p>
<code>Warning: Server HTML containing <div> tags within <html> is not expected. </code></p><p>
<code>Error: Hydration failed because the initial UI does not match what is rendered on the server. </code>*n</p><p>
The most ridiculous thing is that I opened the home page of Remix, and the same error was reported on its home page, so I was particularly curious whether the hydration was successful and why this error occurred. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a well-known React issue caused by browser extensions modifying the DOM.
It's more obvious in Remix because it renders the entire
<html />, not just<div id="root" /> ;.You can confirm whether a browser extension is causing the problem by using a browser profile without the extension installed (or in incognito mode).
Kiliman demonstrates a workaround here: https://github.com/kiliman/remix-hydration-fix, which involves rendering the header and application separately.