Closed myagizmaktav closed 1 year ago
Hi,
So all browsers on Windows show this error?
Could you share the stack it prints? Or more screenshots from the console? My Windows machine is stuck right now, but I wonder if the logs can help further.
One thing is that before the given commit, https://github.com/acikkaynak/deprem-yardim-frontend/commit/654bc2ea254717db77dbe2c45d894dd4733aacae, on the Server, there's no filter values, however, the commit made it so that there's an initial value on the server, and that means that these lines:
renderValue={(selected) =>
selected
.map((val: any) => t(`filter.reasons.${val}`).toLocaleUpperCase())
.join(", ")
}
value={filterValues}
and
<Checkbox
sx={{
padding: "0",
margin: "0",
}}
checked={filterValues.indexOf(item) > -1}
/>
Are generating HTML Server Side as well.
Now I could speculate that the problem is perhaps toLocaleUpperCase
not behaving the same way it does on the server, because the browser takes locale from user settings, while Node.js would take it from the server OS.
So my hypothesis would be the that server uppercases using the server OS locale, while the browser does it with some other user driven setting, and creates divergence.
Why would it surface only on Windows? Not sure, but I am now afraid it might surface in various places after a production deploy.
You could try to remove the .toLocaleUpperCase
in your dev environments, and see if the problem "goes away", just to test.
Hi @icyJoseph
Edge
Chrome
Delete node_modules folder, .next folder, and delete .toLocaleUpperCase
Its still continue.
I turn all toLocaleUpperCase to toUpperCase And its work thanks. We should add this issue in eslint with warning way.
Yeah, feels like that's a pitfall. Pretty much like working with dates too.
The server renders with a time zone and locale, but the browser might sit on a different time zone and locale.
There's tricks to get around this, but I'm glad you resolved it.
Can you send me documentation about these tricks if you know? pls.
The sort of official way to suppress the warning/error:
However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
A more complicated way is to
In this article about rehydration issues https://www.joshwcomeau.com/react/the-perils-of-rehydration/#the-solution-9, this solution would be the so called, two pass rendering, which is what you were trying to get rid off in the first place 😅 ah front end development is fun. I had way too much free time back in the day and wrote an answer about it here too: https://github.com/vercel/next.js/discussions/38263#discussioncomment-3070160
Thanks for jumping on helping with this @icyJoseph! :green_heart:
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/acikkaynak/deprem-yardim-frontend
To Reproduce
Step 1 : open windows. Step 2: open folder Step 3 : open cmd Step 4: write git clone https://github.com/acikkaynak/deprem-yardim-frontend.git Step 5: write npm i -g yarn Step 6 : write yarn Step 7: write yarn dev Step 8: open localhost:3000 Step 9 : You see the bug on windows.
Describe the Bug
Hello,
We are currently working on an open source project focused on Turkey earthquake using Next.js. You can learn more about the project on our website, afet.org or on Time's article about it: https://time.com/6254500/turkey-earthquake-twitter-musk-rescue/.
While developing, we came across a problem with our project on Windows platform during local development. We are experiencing a hydration error on this platform, specifically after this commit: https://github.com/acikkaynak/deprem-yardim-frontend/commit/654bc2ea254717db77dbe2c45d894dd4733aacae. We have reviewed the code multiple times but have not been able to identify any issues. Interestingly, this error is not present when we run the project on Linux or Mac platforms.
Unfortunately, we have been unable to find a solution to this problem without double rendering on Windows. We are actively seeking a resolution and will keep you updated on our progress.
Thank you for your attention.
Expected Behavior
Not give to hydration error on windows local development.
Which browser are you using? (if relevant)
We try all browser.
How are you deploying your application? (if relevant)
Vercel