## Error Type
Console Error
## Error Message
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
...
<RedirectErrorBoundary router={{...}}>
<InnerLayoutRouter url="/" tree={[...]} params={{}} cacheNode={{rsc:{...}, ...}} segmentPath={[...]} ...>
<SegmentViewNode type="page" pagePath="page.tsx">
<SegmentTrieNode>
<HomePage>
<section>
<section className="section ho...">
<div className="container">
<div>
<div className="how-it-wor...">
<p>
<ImageCompare>
<div className="image-comp...">
<div>
<p itemOne={<g>} itemTwo={<g>} handle={<div>} style={{...}}>
<d boundsPadding="0px" browsingContext={Window} changePositionOnHover={false} clip="all" ...>
<x style={{...}}>
<div
ref={{current:null}}
style={{
+ position: "relative"
- position: "relative"
+ boxSizing: "border-box"
+ display: "grid"
- display: "grid"
+ maxWidth: "100%"
+ maxHeight: "100%"
+ overflow: "hidden"
+ cursor: undefined
+ touchAction: "pan-y"
+ userSelect: "none"
+ KhtmlUserSelect: "none"
+ msUserSelect: "none"
+ MozUserSelect: "none"
+ WebkitUserSelect: "none"
+ transition: "--rcs-raw-position 0.15s ease-out"
+ --rcs-raw-position: "50%"
- --rcs-raw-position: "50%"
+ --rcs-bounds-padding: "0px"
- --rcs-bounds-padding: "0px"
+ --rcs-current-position: "clamp(var(--rcs-bounds-padding), var(--rcs-raw-position) - va..."
- --rcs-current-position: "clamp(var(--rcs-bounds-padding), var(--rcs-raw-position) - va..."
+ borderRadius: "0 4px 4px 4px"
- box-sizing: "border-box"
- max-width: "100%"
- max-height: "100%"
- overflow-x: "hidden"
- overflow-y: "hidden"
- touch-action: "pan-y"
- user-select: "none"
- border-top-left-radius: "0px"
- border-top-right-radius: "4px"
- border-bottom-right-radius: "4px"
- border-bottom-left-radius: "4px"
}}
data-rcs="root"
data-rcs-clip="all"
>
...
...
...
...
at div (<anonymous>:null:null)
at ImageCompare (src/components/ImageCompare.tsx:18:7)
at HomePage (src/app/page.tsx:95:13)
## Code Frame
16 | </div>
17 |
> 18 | <ReactCompareSlider
| ^
19 | itemOne={
20 | <ReactCompareSliderImage
21 | src={`${basePath}/images/without-mellea.png`}
Next.js version: 16.2.1 (Turbopack)
When running local preview build (found when testing #9)