remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.96k stars 2.53k forks source link

hydration error when there is a chrome extension that modifies DOM #4822

Open jin2255 opened 1 year ago

jin2255 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

jin2255 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

lmachens commented 1 year ago

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

OnurGvnc commented 1 year ago

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

jin2255 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

So basically my understanding is:

jin2255 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

Képernyőkép – 2023-01-21 07-57-59

kzsa commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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. image

jin2255 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

rista404 commented 1 year ago

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 commented 1 year ago

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:

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

franklinjavier commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Where did you put this snippet?

jpraccio0722 commented 1 year ago

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 commented 1 year ago

Let me try with express template

franklinjavier commented 1 year ago

It worked here

image
jpraccio0722 commented 1 year ago

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

franklinjavier commented 1 year ago

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

alexhoo commented 1 year ago

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