vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.87k stars 26.97k forks source link

BUG: Hyration Err On Windows Env Without Reason. Fixed= Err Coming From toLocaleUpperCase() #46038

Closed myagizmaktav closed 1 year ago

myagizmaktav commented 1 year ago

Verify canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 19.6.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.1.6
  eslint-config-next: 13.1.6
  react: 18.2.0
  react-dom: 18.2.0

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. image

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

icyJoseph commented 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.

icyJoseph commented 1 year ago

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.

myagizmaktav commented 1 year ago

Hi @icyJoseph

Edge

image image image

Chrome image

Delete node_modules folder, .next folder, and delete .toLocaleUpperCase image

Its still continue.

myagizmaktav commented 1 year ago

I turn all toLocaleUpperCase to toUpperCase And its work thanks. We should add this issue in eslint with warning way.

icyJoseph commented 1 year ago

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.

myagizmaktav commented 1 year ago

Can you send me documentation about these tricks if you know? pls.

icyJoseph commented 1 year ago

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

balazsorban44 commented 1 year ago

Thanks for jumping on helping with this @icyJoseph! :green_heart:

github-actions[bot] commented 1 year ago

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.