hydration error when there is a chrome extension that modifies DOM

[jin2255]

What version of Remix are you using?

latest

Steps to Reproduce

I installed an extension that modifies DOM such as Grammar Checker into my browser and tried to develop a web app with Remix. I get the following errors and the styles of the app were messed up.

Hydration failed because the initial UI does not match what was rendered on the server. There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Expected Behavior

I have errors when I install any extension that modifies DOM into my browser

Actual Behavior

The favicon and styles are messed up The important thing is that this error has already been mentioned many times and there is no exact solution What's even more interesting is that the https://remix.run site doesn't have this error occur even if it was developed with Remix

[trevordebard]

This is a known gotcha, however, I agree it would be helpful if Remix could do something to prevent this from happening. For me the error only occurs in development. Has anyone found a workaround other than incognito or uninstalling the extensions?

[machour]

We talked about this with @mjackson

The root of the problem is that remix hydrates the whole document, instead of a div on the body.

Not sure if the team is willing to reconsider this choice, and the consequences it would have on handling things like meta & so on. Maybe a good topic for today's live roadmap stream.

[jin2255]

Thank you all for the answers. It's a pity that there is no exact solution yet. A few months ago, I started developing sites with Remix instead of Next and now I can't deploy to production because of this problem. Hopefully, the team at Remix will fix this soon. And I wonder how this error doesn't happen in the https://remix.run site. Doesn't this mean that we already have the possibility to solve this problem? If anyone knows, please... 🙏

[trevordebard]

@jin2255 Are you experiencing this error when running in production? I only experience it in development.

[jin2255]

This happens in both production and development. The problem is not an error in the dev tools console. The problem is that favicon and styles are disappeared.

[jin2255]

We talked about this with @mjackson

The root of the problem is that remix hydrates the whole document, instead of a div on the body.

Not sure if the team is willing to reconsider this choice, and the consequences it would have on handling things like meta & so on. Maybe a good topic for today's live roadmap stream.

thank you, @machour So, do we have to wait for the team to fix this? 😥

[machour]

@jin2255 someone needs to post a proposal for change and a discussion needs to happen, in order to get this on the team radar: https://remix.run/docs/en/v1/pages/contributing#feature-development

[alexhoo]

This happens in both production and development. The problem is not an error in the dev tools console. The problem is that favicon and styles are disappeared.

for me its only happening in production :'(

[jin2255]

thank you @machour I posted a discussion to https://github.com/remix-run/remix/discussions/4902 I hope I can get a exact solution...

[bidbanRG]

I am not getting any error in Firefox and incognito of chrome. Do anyone getting any error in production???

[lmachens]

I face the same issue with https://chrome.google.com/webstore/detail/autoscroll/occjjkgifpmdgodlplnacmkejpdionan/related extension on development and production.

[OnurGvnc]

I was able to resolve my issue by invoking clearBrowserExtensionInjectionsBeforeHydration() prior to executing hydrateRoot(). https://gist.github.com/OnurGvnc/31f03f0d5237b78224aa083493fda645

[jin2255]

mhmm, so it seems there is not exact solution yet I will not use remix till the remix team solve the problem correctly or till I can sure it's possible to prevent this error correctly my next project will be developed by next js or any other frameworks, no remix

Really I loved remix but the remix community is not big yet and it seems remix has some potential errors 😪 😭 I hope I can use remix for my future projects later

thank you @machour , @OnurGvnc

[alexhoo]

Well @jin2255 I just needed to downgrade react version ( from 18.x.x to 17.x.x ) and every it is fine by now in our production environment.

[machour]

@jin2255 Ryan and Michael discussed this in the Roadmap live stream last week. I recommend to view these two parts:

• https://youtu.be/eGWG22olL0o?t=310
• https://youtu.be/eGWG22olL0o?t=3082

So basically my understanding is:

• Remix sees this as a React issue
• That issue doesn't affect your website. It just means that React swaps your UI at some point, and user still don't notice it.
• If you are able to show that this is actually a problem, and your website is breaking because of this, please set up a repository reproducing the issue, and the team will give this a deeper look.

[jin2255]

Well @jin2255 I just needed to downgrade react version ( from 18.x.x to 17.x.x ) and every it is fine by now in our production environment.

[sergiocarneiro]

When using CSS-in-JS, the styles fail to render, so as you can imagine it feels like the entire site breaks.

In summary, it's a React 18 problem and it can be seen at entry.client.tsx.

FAILS

hydrateRoot(document, <RemixBrowser />)

WORKS

hydrate(<RemixBrowser />, document)
// Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead.
// Until you switch to the new API, your app will behave as if it's running React 17

Reproduction

https://stackblitz.com/edit/node-czrvzk?file=app/entry.client.tsx

I used styled-components and I have a large project using styletron that also has this same issue and workaround.

[sergiocarneiro]

This is not just a Chrome Extension problem.

If you share your website on social media, it opens in an in-app browser. Meta, at least, injects fancy stuff in the DOM (weird, right?), which leads to the same issue.

This one is more concerning to me, as the brand's reputation is at stake (they are linking the customers to an apparently broken site), and affects 100% of the users.

[kzsa]

On remix.run If you scroll down to "Remix has a cheat code: Nested Routes." when viewing the home page with google chrome's built-in translator, the page runs into an error.

[kzsa]

This is not just a Chrome Extension problem.

If you share your website on social media, it opens in an in-app browser. Meta, at least, injects fancy stuff in the DOM (weird, right?), which leads to the same issue.

This one is more concerning to me, as the brand's reputation is at stake (they are linking the customers to an apparently broken site), and affects 100% of the users.

For the time being, I think it's better to avoid R18. If you can't use the built-in Chrome translator on your site, there is a hidden accessibility problem. Content translation can be expensive and time-consuming process. Not all startups can finance content translation at the beginning.

[Xiphe]

Still with react@17 additional injected elements (such as the <style /> from styled-components) are wiped when hydrating - even when there are no hydration errors displayed

...unless they're placed as the last child of an element, which is not controllable in every case...

[kzsa]

Still with react@17 additional injected elements (such as the <style /> from styled-components) are wiped when hydrating - even when there are no hydration errors displayed

...unless they're placed as the last child of an element, which is not controllable in every case...

Right, I just checked that it is also 17.

[jin2255]

thank you, all I know this error doesn't happen in React 17. I've seen many articles and advertisements saying that remix is much better than next. So, I recently tried to use remix to businesses and found an unexpected bug, and the remix team just said it isn't a remix problem... Disappointment! I will go with React 18, Next JS

[kzsa]

Each tool has its own advantages, limitations and surprises. This applies to Next as well. (e.g. image optimization...) It is always difficult to choose. In my current project I have to avoid both Remix and Next. It doesn't mean that they are bad, it just means that I have to choose another one to achieve my current goals. I hope that this problem will be solved and we'll once again be able to choose from a wide range of tools.

[jin2255]

Each tool has its own advantages, limitations and surprises. This applies to Next as well. (e.g. image optimization...) It is always difficult to choose. In my current project I have to avoid both Remix and Next. It doesn't mean that they are bad, it just means that I have to choose another one to achieve my current goals. I hope that this problem will be solved and we'll once again be able to choose from a wide range of tools.

Mostly use React for the frontend. That's why I'm so obsessed with remix and next. if I start with other frameworks now, it takes more time to make production. which framework or stack do you prefer?

[kzsa]

I see that there will be progress on this issue. Someone is working on it. :+1: https://remix.run/docs/en/v1/route/error-boundary

https://user-images.githubusercontent.com/59151228/216314624-c5a5752b-b546-455f-b27b-159ecc9a93f8.mp4

[Xiphe]

@kiliman figured out a workaround by not having remix render the complete document but "classic" style a <div id="root"> + stuff in <head> as side-effect: https://github.com/remix-run/remix/discussions/5244#discussioncomment-4832036

[kzsa]

Each tool has its own advantages, limitations and surprises. This applies to Next as well. (e.g. image optimization...) It is always difficult to choose. In my current project I have to avoid both Remix and Next. It doesn't mean that they are bad, it just means that I have to choose another one to achieve my current goals. I hope that this problem will be solved and we'll once again be able to choose from a wide range of tools.

Mostly use React for the frontend. That's why I'm so obsessed with remix and next. if I start with other frameworks now, it takes more time to make production. which framework or stack do you prefer?

Stack depends on the task. Learning a framework takes time. I rarely use frameworks. I can't say that sometimes I'm not seduced, but I prefer to rely on proven libraries. I have favourite tools to speed up progress, but it's a matter of taste. For web development: React, VanillaJS, Preact, just wanted to try Remix, CSS, SCSS (Without fancy frameworks.) node, Express, PHP, Laravel, Symfony, KeystonseJS mySQL, SQLite, Mongo, GraphQL Webpack, Parcel, Gatsby, Vite I am now learning from the big guys about Web Components. Linux, Vagrant, podman, QEMU/KVM

I have great respect for free software developers who contribute their knowledge to make my job easier. Building and maintaining a library/framework/tool takes a lot of effort.

I hope you find the right one for you, Br: Zsolt

[designbyadrian]

I'm experiencing this issue on Remix.run 1.11.1, and React 18.0.2.

Tried using hydrate, but same issue.

Issues appear as soon as I activate a plugin like Dark Mode. Incognito Mode or disabling extensions is not an option. I can't tell this to our thousands of users.

Found a small example online: https://stackblitz.com/edit/node-czrvzk?file=app%2Fentry.server.tsx, with this extension: https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj

[Xiphe]

@designbyadrian the only solution I'm currently aware of is either downgrade to react@17 or to not render remix into the document but a <div id="root"> - see https://github.com/Xiphe/remix-island for how to do the latter.

[designbyadrian]

@Xiphe I think this actually solved my issue! I'm using a custom Document component, but the fix is the same.

I really appreciate the examples given in the repo!

Edit: this fix causes new issues. I've written a ticket in the corresponding repo.

[Jackardios]

@sergiocarneiro Looks like its partially fixed in React 18.3.0-next-fccf3a9fb-20230213 React 18.2.0 https://stackblitz.com/edit/node-czrvzk?file=app%2Fentry.client.tsx React 18.3.0-next-fccf3a9fb-20230213: https://stackblitz.com/edit/node-21xww3?file=app%2Fentry.client.tsx Hydration errors still happen, but styles don't break Need to check other cases too.

[tmcw]

Right to assume that the current state of this issue is that we're waiting for React 18.3.0 to be released, and until then most Remix sites for most users will have a flash of unstyled content?

[lili21]

That issue doesn't affect your website. It just means that React swaps your UI at some point, and user still don't notice it.

@machour the user will see a flash of unstyled content.

@tmcw You can try the remix-island package .

[mh4ck]

It's not only a extension problem, a lot of scripts modify the body like adsense etc. if remix want to survive it needs to solve it. I think it's not a big thing to just render the head separately and the content in a div. There are already examples on the web how to modify the entry.server.jsx and entry.client.jsx for that. But it needs to be out of the box. It's a BIG PROBLEM right now!

Of course it currently just write an error into the logs and replace the content to client side rendering, but had anyone see the CLS score while doing it? It's a 100% layout shit while doing so! You can kick SEO Optimizing down the stairs if that stay like it is.

[lili21]

@mh4ck try the react canary version, it should be fixed.

[rista404]

Tried react version 18.3.0-canary-8ec962d82-20230623 but the problem persists. Unfortunately I can't make a repro (due to the size of the project) but this issue is happening in production and it's causing some styles to break and the user gets a half-styled page. Quite a problem UX wise.

[brophdawg11]

We've had a number of these types of issues filed - and we're pretty confident they boil down to a React issue which we believe is fixed in 18.3. I'm going to close out the rest of the issues and choose this one as the canonical since it's been around for a while and seems to have the most traction.

Other related issues:

• https://github.com/remix-run/remix/issues/2570
• https://github.com/remix-run/remix/issues/2947
• https://github.com/remix-run/remix/issues/4175
• https://github.com/remix-run/remix/issues/4651
• https://github.com/remix-run/remix/discussions/4902
• https://github.com/remix-run/remix/issues/5020
• https://github.com/remix-run/remix/issues/5569
• https://github.com/remix-run/remix/issues/5760

Partial React fix in 18.2: https://github.com/facebook/react/issues/22833 React tracking issue: https://github.com/facebook/react/issues/24430

We'll keep this open until 18.3 is released to confirm it resolves the primary issue.

[mbrowne]

I just tried with 18.3.0-canary-1a001dac6-20230812 and unfortunately I'm still getting the "Hydration failed because the initial UI does not match..." error when running in Cypress (even locally).

[alexhoo]

I have also tried with 18.3.0 canary and despite I still having this hydration errors Im not having the flashing screen errors anymore

[IDrissAitHafid]

upgrading to 18.3.0-canary-ddff50469-20230829 solved the same issue I have with React-Select which uses Emotion.

[franklinjavier]

I fixed with this solution.

See the repo and the demo: https://github.com/franklinjavier/remix-fixed-hydration-issue https://remix-fixed-hydration-issue.vercel.app

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <Meta />
        <Links />
      </head>
      <body>
        {/**
         * This removes anything added to html from extensions, causing hydration issue
          https://github.com/remix-run/remix/issues/4822
        */}
        <script
          dangerouslySetInnerHTML={{
            __html: `document.querySelectorAll("html > script").forEach((s) => s.parentNode?.removeChild(s));`,
          }}
        />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

[jpraccio0722]

On a fresh install with npx create-remix@latest --template remix-run/remix/templates/express Hydrations errors continue to occur even after applying this:

<script dangerouslySetInnerHTML={{ __html: `document.querySelectorAll("html > script").forEach((s) => s.parentNode?.removeChild(s));`, }} />

[franklinjavier]

Where did you put this snippet?

[jpraccio0722]

app/root.tsx

here's mine:

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
      <script
          dangerouslySetInnerHTML={{
              __html: `document.querySelectorAll("html > script").forEach((s) => s.parentNode?.removeChild(s));`,
          }}
      />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

[franklinjavier]

Let me try with express template

[franklinjavier]

It worked here

[jpraccio0722]

My issue was fixed by updating to the latest Chrome: 118.0.5993.117 Sadly, didn't record the breaking version

[franklinjavier]

Hmm, so this workaround isn't 100% effective, I need to think of another alternative

[alexhoo]

The best solution I found was to upgrade React to it's latest canary version 18.3.x. maybe it helps to you