Chrome 131 & React 18.3.1, Hydration failed because the initial UI does not match what was rendered on the server #12663
Labels
Comments
JerrySLau
changed the title
|
Chrome 131 & React 19 & react-router 7.1.1 is OK |
|
React 19 is more forgiving about hydration issues. Do you have a browser extension installed that might be adding something to your page? I got this a lot with the Grammarly one, for instance. |
|
@timdorr was going to say exactly the same thing, it's the Language Tool for me that causes these errors |
Been dealing with these errors on firefox, too. This seems to have been caused by using DarkReader. Upgrading to react 19 shows a helpful error message with a diff: ...
<RemixErrorBoundary location={{pathname:"/", ...}}>
<RouterProvider2 router={{basename:"/", ...}}>
<RouterProvider flushSync={function} router={{basename:"/", ...}}>
<Router basename="/" location={{pathname:"/", ...}} navigationType="POP" navigator={{...}}>
<DataRoutes routes={[...]} future={{}} state={{...}}>
<RenderErrorBoundary location={{pathname:"/", ...}} revalidation="idle" component={<Layout>} ...>
<RenderedRoute match={{params:{}, ...}} routeContext={{...}}>
<Layout>
<html
lang="en"
- data-darkreader-mode="dynamic"
- data-darkreader-scheme="dark"
>
<head>
<meta>
<meta>
<Meta>
<Links>
<style
dangerouslySetInnerHTML={{
+ __html: "\n/* /app/app.css */\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --..."
- __html: ""
}}
- className="darkreader darkreader--fallback"
- media="screen"
>
...
... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm using React Router as a...
framework
Reproduction
https://github.com/JerrySLau/issues-react-router-example.git
commit 7a33c03a119556944acf911fd1c7f938cc72df2c
System Info
System: OS: macOS 15.2 CPU: (8) arm64 Apple M3 Memory: 227.55 MB / 24.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.5/bin/yarn npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm Browsers: Chrome: 131.0.6778.205 Safari: 18.2 npmPackages: @react-router/dev: ^7.1.1 => 7.1.1 @react-router/express: ^7.1.1 => 7.1.1 @react-router/fs-routes: ^7.1.1 => 7.1.1 @react-router/node: ^7.1.1 => 7.1.1 react-router: ^7.1.1 => 7.1.1 vite: ^5.4.0 => 5.4.11Used Package Manager
npm
Expected Behavior
render test page correctly(in safari 18.2 is ok, error in chrome 131.0.6778.205)
Actual Behavior
chunk-C6G4AGV4.js?v=fd8a3fd9:6973 Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (chunk-4JV6IK6A.js?v=fd8a3fd9:9471:17)
at tryToClaimNextHydratableInstance (chunk-4JV6IK6A.js?v=fd8a3fd9:9492:15)
at updateHostComponent (chunk-4JV6IK6A.js?v=fd8a3fd9:14792:13)
at beginWork (chunk-4JV6IK6A.js?v=fd8a3fd9:15933:22)
at beginWork$1 (chunk-4JV6IK6A.js?v=fd8a3fd9:19751:22)
at performUnitOfWork (chunk-4JV6IK6A.js?v=fd8a3fd9:19196:20)
at workLoopConcurrent (chunk-4JV6IK6A.js?v=fd8a3fd9:19187:13)
at renderRootConcurrent (chunk-4JV6IK6A.js?v=fd8a3fd9:19162:15)
at performConcurrentWorkOnRoot (chunk-4JV6IK6A.js?v=fd8a3fd9:18676:46)
at workLoop (chunk-4JV6IK6A.js?v=fd8a3fd9:195:42)
The text was updated successfully, but these errors were encountered: