search

Home  >  Q&A  >  body text

Why do I get a "Hydration failed" error when initializing a project using Remix's Indie stack in Devtools?

<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>
P粉476475551P粉476475551489 days ago518

reply all(1)I'll reply

  • P粉043566314

    P粉0435663142023-08-30 17:16:14

    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.

    reply
    0
  • Cancelreply