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

[leduyquang753]

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?

no

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?

no

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]

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]

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]]

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]

keep open

[layershifter]

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

Tabster related.

[anishkumar127]

related issue maybe in next.js 15 also. https://github.com/microsoft/fluentui/issues/33388#issuecomment-2516189244

[antonius-ivan]

it shown for SSR. in next js and also on Remix.

extra attributes, data tabster

[antonius-ivan]

My React Router SSR for NavDrawer is style Leak. But When i use Drawer, the error is same. Extra Attributes, data-tabaster, style. Like you said, tabster related

[layershifter]

@fluentui/[email protected] 🔴

@fluentui/[email protected] ✅

---

Seems that it was accidentally fixed by #34113. Looks that as we don't invoke Tabster during render anymore, we don't cause conflicts in hydration.