Replies: 7 comments 7 replies
-
|
This is a general React problem, not Remix specifically. |
Beta Was this translation helpful? Give feedback.
-
|
@ryanflorence the difference is that remix hydrates the whole document, where other apps usually hydrate a We keep getting bug reports / questions about this warning, and I feel like we either want to reconsider what we hydrate, or rewrite this gotcha to provide all the answers to things folks have been wondering about: Questions are:
See also this (very correct) comment: #2682 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@machour so true. hydrating the whole document make the error more easier to happened. |
Beta Was this translation helpful? Give feedback.
-
|
@machour I agree on updating the gotchas docs to explain more what's happening, specifically the part "will it break my app in production for users with extensions?" |
Beta Was this translation helpful? Give feedback.
-
I know |
Beta Was this translation helpful? Give feedback.
-
Expect to be more of a Chrome problem than a React problem In my research and observation, I have found that Chrome extensions that inject content into a page occasionally trigger this error, such as "React Developer Tools," which occasionally causes hydration errors. Later I read that Chrome extensions do not always inject content into a page at a fixed time, which means sometimes before the page is loaded, sometimes after the page is loaded. If you inject after the page is loaded, you won't get an error. If you inject before the page is loaded, you will naturally fail to hydrate. Once people bring up the subject, Remix officials will just say it's a React problem and do nothing about it. Why is Remix the only SSR framework with this problem? Or does Remix just not care about the developer's feelings? Remember that most browser extensions now inject scripted content into the page, and if this isn't fixed, it means Remix won't work in production. While we know that disabling Chrome extensions can fix this, we can't ask our users to disable Chrome extensions I believe the reason the Remix website doesn't have this issue is because they are using the React 17 version, if they are using the latest version they will have this issue |
Beta Was this translation helpful? Give feedback.
-
|
I created a similar discuss about this issue one month ago. #4674 |
Beta Was this translation helpful? Give feedback.
-
|
for the more, I can't find any solution in this discusstion |
Beta Was this translation helpful? Give feedback.
-
|
You can try to wrap the unmatched part into Suspense, it can't fix the problem, but it can prevent the entire root switch to client rendering. |
Beta Was this translation helpful? Give feedback.
-
|
Expect to be more of a Chrome problem than a React problem In my research and observation, I have found that Chrome extensions that inject content into a page occasionally trigger this error, such as "React Developer Tools," which occasionally causes hydration errors. Later I read that Chrome extensions do not always inject content into a page at a fixed time, which means sometimes before the page is loaded, sometimes after the page is loaded. If you inject after the page is loaded, you won't get an error. If you inject before the page is loaded, you will naturally fail to hydrate. Once people bring up the subject, Remix officials will just say it's a React problem and do nothing about it. Why is Remix the only SSR framework with this problem? Or does Remix just not care about the developer's feelings? Remember that most browser extensions now inject scripted content into the page, and if this isn't fixed, it means Remix won't work in production. While we know that disabling Chrome extensions can fix this, we can't ask our users to disable Chrome extensions I believe the reason the Remix website doesn't have this issue is because they are using the React 17 version, if they are using the latest version they will have this issue |
Beta Was this translation helpful? Give feedback.
-
|
Same thing happens in Firefox when extensions are in use, so not just Chrome. |
Beta Was this translation helpful? Give feedback.
-
|
Locked because this is not a proposal. |
Beta Was this translation helpful? Give feedback.
-
|
I've got a solution for the hydration issues entirely in userland. |
Beta Was this translation helpful? Give feedback.
-
hydration error when there is a chrome extension that modifies DOM
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.
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
I posted the error as above to #4822 and got a suggestion from @machour that a discussion needs to happen.
Since I don't have a lot of experience in remix, I hope someone can help me with the exact solution to this problem.
As a solution, I also saw articles that found a way to wrap the content in a specific tag(e.g.
<div id="root"></div>) and hydrate in that wrapper.Will the remix be updated in this format in the future?
Beta Was this translation helpful? Give feedback.
All reactions