[Bug ]: Tabs component is not rendering correctly in Remix.run (SSR)

[bouraine]

Package

@carbon/react

Browser

Chrome

Package version

112.0.5615.138 (Official Build) (64-bit)

React version

18.2.0

Description

I have this error when i try to add Tabs component to remix.run page Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Here is how the tabs are rendered:

Tested example:

<Tabs>
  <TabList aria-label="List of tabs">
    <Tab>Tab label 1</Tab>
    <Tab>Tab label 2</Tab>
  </TabList>
  <TabPanels>
   <TabPanel>Tab Panel 1</TabPanel>
   <TabPanel>Tab Panel 2</TabPanel>
  </TabPanels>
</Tabs>

``

The problem is caused by @carbon/feature-flags module which returns different results in client and the server.

This line returns false the first time it is executed on client (web) even if the flag enable-v11-release is enabled.

workaround

A workarround i found for now is to fork the @carbon/feature-flags package, fix the bug and and reference my local fork in package.json

Reproduction/example

https://stackblitz.com/edit/remix-carbon-dmnxpk?file=app/entry.server.tsx

Steps to reproduce

https://stackblitz.com/edit/remix-carbon-dmnxpk?file=app/entry.server.tsx

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@bouraine thanks for reporting, I think this will be solved by #13727 which should turn on the feature flag by default.

In this case it's convenient that this flag can be set to true, but for other flags that may not be the case and this same issue could crop up again. I assume it's because the flags are initialized to one value initially in @carbon/feature-flags

carbon/packages/feature-flags/feature-flags.yml

Lines 21 to 24 in 1e79ed1

	- name: enable-v11-release
	description: >
	Enable the features and functionality for the v11 Release
	enabled: true

and then set client-side here

carbon/packages/react/src/index.js

Line 8 in 7d3adcd

import './feature-flags';

carbon/packages/react/src/feature-flags.js

Lines 8 to 15 in 36685a0

	import * as FeatureFlags from '@carbon/feature-flags';
	FeatureFlags.merge({
	'enable-css-custom-properties': true,
	'enable-css-grid': true,
	'enable-v11-release': true,
	'enable-experimental-tile-contrast': false,
	});

We'll need to look into how to fix this.

[tay1orjones]

Related #13505