remix
remix copied to clipboard
remix-run
hydration error when there is a chrome extension that modifies DOM
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
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?
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 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... 🙏
@jin2255 Are you experiencing this error when running in production? I only experience it in development.
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.
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? 😥
@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
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 :'(
thank you @machour I posted a discussion to https://github.com/remix-run/remix/discussions/4902 I hope I can get a exact solution...
I am not getting any error in Firefox and incognito of chrome. Do anyone getting any error in production???
I face the same issue with https://chrome.google.com/webstore/detail/autoscroll/occjjkgifpmdgodlplnacmkejpdionan/related extension on development and production.
I was able to resolve my issue by invoking clearBrowserExtensionInjectionsBeforeHydration() prior to executing hydrateRoot().
https://gist.github.com/OnurGvnc/31f03f0d5237b78224aa083493fda645
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
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.
@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.
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.
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.
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.
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.
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.
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...
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.
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
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.
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?
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
@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
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
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
@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.