fix: add missing "use client" directive to client components and styles by dmytrokirpa · Pull Request #35719 · microsoft/fluentui

dmytrokirpa · 2026-02-03T20:03:59Z

Previous Behavior

Multiple Fluent UI v9 packages were missing the 'use client' directive in their compiled JavaScript output, causing React Server Components (RSC) compatibility issues. Components that use client-side APIs (hooks, DOM manipulation, browser APIs) were being treated as server components by default, leading to runtime errors when developers tried to use them in RSC environments.

Affected packages included:

@fluentui/react-text - Text preset components and style hooks
@fluentui/react-utilities - Client-side hooks like useIsomorphicLayoutEffect
@fluentui/react-shared-contexts - Context files requiring client-side rendering
@fluentui/react-message-bar
@fluentui/react-motion-components-preview
Various utility files using getWindow() and other browser APIs

New Behavior

All client-side components, hooks, and utilities now include the 'use client' directive in their source files. This ensures that:

Components are properly marked for client-side rendering in RSC environments
Developers can import and use Fluent UI v9 components directly in Next.js App Router and other RSC frameworks
The build output correctly propagates the directive to consumers

Files updated include:

Component style files and hooks that access browser APIs
React migration library components (v0-v9 and v8-v9)
Utility files like getWindow that require client-side execution
Context providers and custom hooks

Related Issue(s)

Fixes [Bug]: Missing 'use client' directive in compiled output breaks RSC #35708

- Added "use client" directive to global-context-selector.ts, useDisableBodyScroll.styles.ts, and multiple Attachment component styles. - Updated various components in react-migration-v0-v9 and react-migration-v8-v9 libraries to include "use client" for compatibility with client-side rendering. - Included "use client" in utility hooks and context files to ensure proper execution in client environments. - Adjusted imports and ensured consistent application of the directive across all affected files.

github-actions · 2026-02-03T20:13:17Z

📊 Bundle size report

✅ No changes found

github-actions · 2026-02-03T20:16:05Z

Pull request demo site: URL

github-actions · 2026-02-03T21:06:11Z

.claude/settings.local.json

@@ -0,0 +1,25 @@
+{


🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 614 Changed

vr-tests-react-components/Positioning.Positioning end.chromium.png 620 Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed

vr-tests-web-components/TextInput 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed

vr-tests/Callout 10 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2199 Changed

vr-tests/Callout.Beak 25.default.chromium.png 2198 Changed

vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1124 Changed

vr-tests/Callout.Gap space 25.default.chromium.png 2195 Changed

vr-tests/Callout.No callout width specified.default.chromium.png 2143 Changed

vr-tests/Callout.Right bottom edge.default.chromium.png 3095 Changed

vr-tests/Callout.Right center.default.chromium.png 2117 Changed

vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png 1835 Changed

vr-tests/Callout.Root.default.chromium.png 2195 Changed

vr-tests/Callout.Top auto edge.default.chromium.png 2212 Changed

vr-tests/Keytip 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Keytip.Offset.default.chromium.png 86 Changed

vr-tests/Keytip.Root.default.chromium.png 55 Changed

vr-tests/react-charting-AreaChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png 11 Changed

vr-tests/react-charting-LineChart 4 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png 200 Changed

vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png 181 Changed

vr-tests/react-charting-LineChart.Events.default.chromium.png 2 Changed

vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed

vr-tests/react-charting-VerticalBarChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

.claude/settings.local.json

Hotell

left some comments where some need action, overall LGTM, ty

Hotell · 2026-02-04T14:11:05Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.spec.ts

+      code: `"use client";\n${testCases.customHooks.importedHookReference}`,
+    },
+    {
+      name: 'Imported RSC-unsface function reference with "use client" directive',


Suggested change

name: 'Imported RSC-unsface function reference with "use client" directive',

name: 'Imported RSC-unsafe function reference with "use client" directive',

Hotell · 2026-02-04T14:22:53Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.ts

+      /**
+       * Track imported custom hooks and RSC-unsface functions
+       */
+      ImportDeclaration(node: TSESTree.ImportDeclaration) {


can we merge this with Identifier visitor logic ? as we are already checking if its coming from import

Hotell · 2026-02-04T14:39:21Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.ts

+          return;
+        }
+
+        // Skip if this identifier is in a type-only position


can we improve the reasoning here ? isn't this merely defensive check to satisfy TS error ?

Hotell · 2026-02-04T14:52:54Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.spec.ts

      };
    `,
+    importedHookReference: `import * as React from 'react';
+      import { createPreset } from '../createPreset';


we should update this test case to reflect what it is actually testing.

the createPreset which internally calls various apis (including forwardRef) which should enforce use client is churn which not important ( not being caught by the rule ).

Hotell · 2026-02-04T14:53:14Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.spec.ts

+        displayName: 'Body1',
+      });
+    `,
+    importedSSRUnsafeReference: `import { createPreset } from '../createPreset';


unnecessary createPreset

Hotell · 2026-02-04T15:03:52Z

packages/react-components/eslint-plugin-react-components/src/rules/enforce-use-client.ts

+ * These functions may have typeof checks internally, but when called at module scope they still
+ * require client-side execution.
+ */
+const RSC_UNSAFE_FUNCTIONS = new Set([


we can keep it here for now but it breaks the generic approach as it makes it tightly coupled to our apis.

having this as configurable option when specifing the rule would make it better

for future in order to make this rule generic and catch all corners we will need to switch to dependency tree traversal ( similarily to https://github.com/microsoft/rnx-kit/blob/main/packages/eslint-plugin/src/rules/no-export-all.js ) or to use type program and determine from TS Tree if the whole program contains api that need use client.

Hotell · 2026-02-04T15:10:13Z

packages/react-components/react-utilities/src/ssr/canUseDOM.ts

@@ -1,9 +1,8 @@
+'use client';


is this getting marked because of the hardcoded canUseDOM ? if yes we should extend the rule to also check for window.* and document.* browser only usages and flag accordingly

dmytrokirpa added 2 commits February 3, 2026 21:02

change files

890a63b

dmytrokirpa self-assigned this Feb 3, 2026

dmytrokirpa added Area: SSR Server-side rendering React 19 labels Feb 3, 2026

fixup

da99585

github-actions bot reviewed Feb 3, 2026

View reviewed changes

dmytrokirpa added 3 commits February 4, 2026 07:32

fix formatting issues

71fc4ba

add missing "use client" directive to getWindow utility files

8c6756b

change

08c1320

dmytrokirpa marked this pull request as ready for review February 4, 2026 11:06

dmytrokirpa requested review from a team, GeoffCoxMSFT and Mitch-At-Work as code owners February 4, 2026 11:06

Merge branch 'master' into fix/missing-use-client

ca959a5

tudorpopams requested a review from Hotell February 4, 2026 13:09

Hotell reviewed Feb 4, 2026

View reviewed changes

.claude/settings.local.json Outdated Show resolved Hide resolved

AtishayMsft approved these changes Feb 4, 2026

View reviewed changes

cleanup

fc17ce6

Hotell approved these changes Feb 4, 2026

View reviewed changes

layershifter approved these changes Feb 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: add missing "use client" directive to client components and styles#35719

fix: add missing "use client" directive to client components and styles#35719
dmytrokirpa wants to merge 8 commits intomicrosoft:masterfrom
dmytrokirpa:fix/missing-use-client

dmytrokirpa commented Feb 3, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 3, 2026

Uh oh!

github-actions bot Feb 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Hotell left a comment

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026

Uh oh!

Hotell Feb 4, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	614	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	620	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png	2199	Changed
vr-tests/Callout.Beak 25.default.chromium.png	2198	Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png	1124	Changed
vr-tests/Callout.Gap space 25.default.chromium.png	2195	Changed
vr-tests/Callout.No callout width specified.default.chromium.png	2143	Changed
vr-tests/Callout.Right bottom edge.default.chromium.png	3095	Changed
vr-tests/Callout.Right center.default.chromium.png	2117	Changed
vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png	1835	Changed
vr-tests/Callout.Root.default.chromium.png	2195	Changed
vr-tests/Callout.Top auto edge.default.chromium.png	2212	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Keytip.Offset.default.chromium.png	86	Changed
vr-tests/Keytip.Root.default.chromium.png	55	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png	200	Changed
vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png	181	Changed
vr-tests/react-charting-LineChart.Events.default.chromium.png	2	Changed
vr-tests/react-charting-LineChart.Multiple.default.chromium.png	192	Changed

	name: 'Imported RSC-unsface function reference with "use client" directive',
	name: 'Imported RSC-unsafe function reference with "use client" directive',

Conversation

dmytrokirpa commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

github-actions bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Feb 3, 2026

Uh oh!

github-actions bot Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

Uh oh!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Hotell Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dmytrokirpa commented Feb 3, 2026 •

edited

Loading

github-actions bot commented Feb 3, 2026 •

edited

Loading

github-actions bot Feb 3, 2026 •

edited

Loading

Hotell Feb 4, 2026 •

edited

Loading