-
Notifications
You must be signed in to change notification settings - Fork 29.9k
Description
Link to the code that reproduces this issue
https://github.com/AlexeyLoktev/hydration-bug
To Reproduce
- Start "npm run dev".
- Open "http://localhost:3000/" in the browser.
- You see "aaa". Server's console shows "aaa" and a fresh timestamp (first red selection on the screenshot). That's what ClientComponent renders and does.
- Not stopping the "npm run dev", change "aaa" to "bbb" in your editor in the source code of ClientComponent.
- In the browser you see "bbb" without refreshing the page. Hot reload works well.
- Refresh the page in the browser. You see "bbb" on the webpage, but an error in the browser console appears:
Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.
and it shows the difference:
there is: bbb
there was: aaa
and "aaa" and a fresh timestamp in the server's console (second red selection on the screenshot).
So, AFAIU, the server executes the old version of the source code.
- without [...notFound] page the error disappears
- without "Suspense" in the page.tsx the error disappears
- without "await new Promise" in the page.tsx the error disappears
- with webpack instead of turbopack the error disappears
Removing .next folder before running "npm run dev" doesn't help.
I've tried with Next@15 and Next@16, the bug appears.
Current vs. Expected behavior
After refreshing the page, expected behavior:
- "bbb" on the page without any error messages in the browser's console
- "bbb" in the server's console (with a fresh timestamp)
current behavior:
- "bbb" on the page and an error messages in the browser's console
- "aaa" in the server's console (with a fresh timestamp)
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Enterprise
Available memory (MB): 40744
Available CPU cores: 8
Binaries:
Node: 22.13.0
npm: 10.9.2
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 16.0.1 // There is a newer version (16.0.3) available, upgrade recommended!
eslint-config-next: N/A
react: 19.2.0
react-dom: 19.2.0
typescript: 5.9.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Error Handling, React, Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
The "steps to reproduce" reliably lead to the error, but sometimes this (or a related) error appears in other forms as well - for instance, after refreshing the page (the same repo!) the error may say that some source file is not found, but this file isn't expected to exist - I've just changed the code and removed the file and its usage.
It means AFAIU, the source code being executed on the server is one step behind my real source code; refreshing the page makes the server see the up-to-date version of the source code.