[Bug]: Hydration error when using `TabList` with Next.js's `app` router

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

https://react.fluentui.dev

Other

18.53k stars 2.73k forks source link

[Bug]: Hydration error when using `TabList` with Next.js's `app` router #30094

Open leduyquang753 opened 11 months ago

leduyquang753 commented 11 months ago

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
  Memory: 10.74 GB / 19.78 GB
Browsers:
  Edge: Chromium (120.0.2210.61)
  Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

Reproduction

https://codesandbox.io/p/devbox/fluent-tablist-bug-qm8hqd

Bug Description

Actual behavior

Hydration error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Did not expect server HTML to contain a <i> in <div>.

Expected behavior

The page hydrates normally.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

leduyquang753 commented 11 months ago

Additional notes:

There was #28713 reporting the same issue but it was closed due to lack of reproduction.
The CodeSandbox as was recommended seems to be very finnicky to successfully get up and running, if it doesn't work then I would recommend setting it up locally by using create-next-app then putting the files in app in.

eleni-kamvissis commented 9 months ago

Any progress on this issue? We are experiencing the same issue with the TabList component in our Next.js and Fluent UI project. After some investigations we have seen that the errors only occur in development mode (which is good I guess), but we would also like to get rid of the errors locally. Adding the flag suppressHydrationWarning doesn't help.

Heres a reproduction of the error in CodeSandbox: https://codesandbox.io/p/devbox/nextjs-fluent-tablist-bug-fdqd6m. CodeSandbox is a bit grumpy so if the errors aren't shown immediately, try to refresh the full page and until they appear.

microsoft-github-policy-service[bot] commented 3 months ago

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

igorstefaniak commented 3 months ago

keep open

layershifter commented 3 months ago

https://codesandbox.io/p/devbox/fluent-tablist-bug-forked-ldhjl7

Tabster related.