Intermittent Hydration Mismatch Errors in React Router v7 Application with Tailwind CSS #13198
Description
I'm using React Router as a...
framework
Reproduction
Go to https://stackblitz.com/edit/github-cad31bxg and open the peview in a new tab and then open the console.
As you can see there's an error
(That's the default template I didn't change anything)
System Info
System:
OS: Windows 11 10.0.26100
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 1.74 GB / 7.70 GB
Binaries:
Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.8.0 - ~\AppData\Roaming\npm\pnpm.CMD
bun: 1.2.4 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (132.0.2957.127)
Internet Explorer: 11.0.26100.1882
npmPackages:
@react-router/dev: ^7.2.0 => 7.2.0
@react-router/express: ^7.2.0 => 7.2.0
@react-router/node: ^7.2.0 => 7.2.0
react-router: ^7.2.0 => 7.2.0
vite: ^5.4.11 => 5.4.14Used Package Manager
npm
Expected Behavior
It seems that the code rendered on the server during SSR and the code on the client are not matching in development mode. Is this normal?
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Router basename="/" location={{pathname:"/", ...}} navigationType="POP" navigator={{...}}>
<DataRoutes routes={[...]} future={{...}} state={{...}}>
<RenderErrorBoundary location={{pathname:"/", ...}} revalidation="idle" component={<Layout>} error={undefined} ...>
<RenderedRoute match={{params:{}, ...}} routeContext={{...}}>
<Layout>
<html lang="en">
<head>
<meta>
<meta>
<Meta>
<Links>
<style
dangerouslySetInnerHTML={{
+ __html: "\n/* /app/app.css */\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-bor..."
- __html: "body {transition: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: bl..."
}}
>
...
...
Actual Behavior
There are no issues while coding the website, but this error keeps appearing, and I don't know if it will affect my website in some way.