Skip to content

fix(react-portal): replace Node.ELEMENT_NODE with hardcoded value for SSR compatibility #35350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
dmytrokirpa merged 3 commits into from
Oct 21, 2025
Merged

fix(react-portal): replace Node.ELEMENT_NODE with hardcoded value for SSR compatibility #35350

dmytrokirpa merged 3 commits into from
Oct 21, 2025

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Oct 20, 2025

Previous Behavior

Users reported that their SSR tooling was failing with errors when encountering the Node.ELEMENT_NODE reference in the portal mount node hook. Even though the code is inside a hook, the Proxy's get trap function is defined during component render, and the reference to Node.ELEMENT_NODE (a browser-only API) was being evaluated on the server where the Node global is not available.

New Behavior

Replace the Node.ELEMENT_NODE constant with its literal value 1 and add a comment explaining why. This maintains the same functionality while ensuring compatibility with SSR environments.

Related Issue(s)

@dmytrokirpa dmytrokirpa requested review from a team October 20, 2025 13:28
@dmytrokirpa dmytrokirpa self-assigned this Oct 20, 2025
@dmytrokirpa dmytrokirpa marked this pull request as ready for review October 20, 2025 13:28
@github-actions
Copy link

github-actions bot commented Oct 20, 2025 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart		 385.193 kB
117.43 kB		 385.177 kB
117.427 kB		 -16 B
-3 B
react-charts
DeclarativeChart		 692.836 kB
198.92 kB		 692.82 kB
198.904 kB		 -16 B
-16 B
react-charts
DonutChart		 296.92 kB
88.685 kB		 296.904 kB
88.67 kB		 -16 B
-15 B
react-charts
FunnelChart		 288.076 kB
85.614 kB		 288.06 kB
85.599 kB		 -16 B
-15 B
react-charts
GanttChart		 368.616 kB
111.034 kB		 368.6 kB
111.02 kB		 -16 B
-14 B
react-charts
GaugeChart		 311.622 kB
92.296 kB		 311.606 kB
92.289 kB		 -16 B
-7 B
react-charts
GroupedVerticalBarChart		 376.701 kB
113.57 kB		 376.685 kB
113.552 kB		 -16 B
-18 B
react-charts
HeatMapChart		 370.644 kB
112.595 kB		 370.628 kB
112.592 kB		 -16 B
-3 B
react-charts
HorizontalBarChart		 296.247 kB
87.222 kB		 296.231 kB
87.206 kB		 -16 B
-16 B
react-charts
Legends		 235.235 kB
69.601 kB		 235.219 kB
69.585 kB		 -16 B
-16 B
react-charts
LineChart		 396.387 kB
119.5 kB		 396.371 kB
119.485 kB		 -16 B
-15 B
react-charts
SankeyChart		 198.989 kB
61.126 kB		 198.973 kB
61.124 kB		 -16 B
-2 B
react-charts
ScatterChart		 376.218 kB
113.518 kB		 376.202 kB
113.502 kB		 -16 B
-16 B
react-charts
VerticalBarChart		 411.215 kB
119.118 kB		 411.199 kB
119.117 kB		 -16 B
-1 B
react-charts
VerticalStackedBarChart		 383.031 kB
114.948 kB		 383.015 kB
114.931 kB		 -16 B
-17 B
react-combobox
Combobox (including child components)		 106.981 kB
34.816 kB		 106.965 kB
34.798 kB		 -16 B
-18 B
react-combobox
Dropdown (including child components)		 107.611 kB
34.737 kB		 107.595 kB
34.722 kB		 -16 B
-15 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 236.662 kB
68.579 kB		 236.646 kB
68.562 kB		 -16 B
-17 B
react-components
react-components: entire library		 1.278 MB
321.132 kB		 1.278 MB
321.116 kB		 -16 B
-16 B
react-datepicker-compat
DatePicker Compat		 226.703 kB
64.124 kB		 226.687 kB
64.121 kB		 -16 B
-3 B
react-menu
Menu (including children components)		 165.402 kB
50.102 kB		 165.386 kB
50.087 kB		 -16 B
-15 B
react-menu
Menu (including selectable components)		 168.384 kB
50.68 kB		 168.368 kB
50.664 kB		 -16 B
-16 B
react-popover
Popover		 132.3 kB
41.178 kB		 132.284 kB
41.162 kB		 -16 B
-16 B
react-portal
Portal		 15.411 kB
5.385 kB		 15.395 kB
5.377 kB		 -16 B
-8 B
react-tag-picker
@fluentui/react-tag-picker - package		 188.376 kB
56.482 kB		 188.36 kB
56.482 kB		 -16 B
react-timepicker-compat
TimePicker		 109.972 kB
36.348 kB		 109.956 kB
36.331 kB		 -16 B
-17 B
react-toast
Toast (including Toaster)		 103.349 kB
30.964 kB		 103.333 kB
30.96 kB		 -16 B
-4 B
react-tooltip
Tooltip		 57.962 kB
20.099 kB		 57.946 kB
20.091 kB		 -16 B
-8 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar		 48.555 kB
15.528 kB
react-avatar
AvatarGroup		 19.235 kB
7.617 kB
react-avatar
AvatarGroupItem		 62.699 kB
19.747 kB
react-breadcrumb
@fluentui/react-breadcrumb - package		 114.255 kB
31.55 kB
react-charts
HorizontalBarChartWithAxis		 63 B
83 B
react-charts
Sparkline		 91.123 kB
28.692 kB
react-checkbox
Checkbox		 34.37 kB
11.792 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 68.796 kB
19.903 kB
react-components
react-components: FluentProvider & webLightTheme		 43.63 kB
14.257 kB
react-dialog
Dialog (including children components)		 103.613 kB
30.917 kB
react-field
Field		 22.697 kB
8.603 kB
react-input
Input		 27.148 kB
9.108 kB
react-list
List		 88.922 kB
26.387 kB
react-list
ListItem		 112.46 kB
33.243 kB
react-overflow
hooks only		 12.931 kB
4.85 kB
react-persona
Persona		 55.446 kB
17.41 kB
react-portal-compat
PortalCompatProvider		 8.386 kB
2.624 kB
react-positioning
usePositioning		 28.865 kB
10.146 kB
react-positioning
useSafeZoneArea		 12.29 kB
4.967 kB
react-progress
ProgressBar		 16.593 kB
6.613 kB
react-radio
Radio		 31.8 kB
10.006 kB
react-radio
RadioGroup		 14.889 kB
6.09 kB
react-select
Select		 26.987 kB
9.848 kB
react-slider
Slider		 37.211 kB
12.461 kB
react-spinbutton
SpinButton		 34.468 kB
11.453 kB
react-swatch-picker
@fluentui/react-swatch-picker - package		 106.082 kB
30.558 kB
react-switch
Switch		 34.55 kB
11.013 kB
react-table
DataGrid		 161.157 kB
45.558 kB
react-table
Table (Primitives only)		 41.975 kB
13.575 kB
react-table
Table as DataGrid		 131.48 kB
36.345 kB
react-table
Table (Selection only)		 69.843 kB
19.71 kB
react-table
Table (Sort only)		 68.486 kB
19.324 kB
react-tags
InteractionTag		 14.561 kB
5.865 kB
react-tags
Tag		 30.413 kB
9.802 kB
react-tags
TagGroup		 83.125 kB
24.561 kB
react-teaching-popover
TeachingPopover		 102.777 kB
30.738 kB
react-textarea
Textarea		 25.53 kB
9.361 kB
react-tree
FlatTree		 149.042 kB
42.637 kB
react-tree
PersonaFlatTree		 149.798 kB
42.771 kB
react-tree
PersonaTree		 146.063 kB
41.633 kB
react-tree
Tree		 145.313 kB
41.507 kB
🤖 This report was generated against 1e27e600369335c07a7968ee2c137b6330193cf1

@github-actions
Copy link

github-actions bot commented Oct 20, 2025

Pull request demo site: URL

@Hotell Hotell mentioned this pull request Oct 21, 2025
Closed
Copilot AI mentioned this pull request Oct 21, 2025
Merged
10 tasks
@dmytrokirpa dmytrokirpa enabled auto-merge (squash) October 21, 2025 12:54
@dmytrokirpa dmytrokirpa disabled auto-merge October 21, 2025 14:08
@dmytrokirpa dmytrokirpa enabled auto-merge (squash) October 21, 2025 14:08
@dmytrokirpa dmytrokirpa merged commit 043eb8a into microsoft:master Oct 21, 2025
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@Hotell Hotell Hotell approved these changes

@layershifter layershifter layershifter approved these changes

Assignees

@dmytrokirpa dmytrokirpa

Labels

Area: SSR Server-side rendering Component: Portal Fluent UI react-components (v9)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: react-portal: Node.ELEMENT_NODE causes SSR failures

3 participants

@dmytrokirpa @Hotell @layershifter