fix(react): Fix build errors in TypeScript 5.3.3 by behowell · Pull Request #30809 · microsoft/fluentui

behowell · 2024-03-18T20:53:38Z

Previous Behavior

TypeScript 5 introduced some breaking changes to the way that implicit type coercion happens in templates, as well as a few other breaking changes. Although we don't currently use TypeScript 5.3.3 in the repo, experimental work in the xplat branch requires building against TypesScript 5+. There are also customers using TypeScript 5+, who are seeing build errors when importing FluentUI.

New Behavior

Fix build errors seen if the repo is updated to TypeScript 5.3.3. This is part of a set of PRs intending to fix all build errors when building against TypeScript 5.3.3.

The fixes fall into a few major categories:

Breaking change in TS 4.8: Unconstrained Generics No Longer Assignable to {}.
- Fixed by adding extends {} constraint to template types that previously had no constraint (effectively extends unknown). The new constraint disallows null and undefined as template parameters, which were never valid values for these type parameters anyways.
Breaking change in TS 5.0: Forbidden Implicit Coercions in Relational Operators (effectively: can't use <=, >, etc. between Number and number values).
- Fixed by explicit cast as number to avoid changing semantics of existing code.

ℹ️ Note: This is NOT updating the project to use TypeScript 5.3.3, and an update to the TypeScript version is not planned as part of this change. It is only fixing build errors that would occur if it were built against TypeScript 5.3.3.

Related Issue(s)

This PR was split out from a draft PR that contains all of the changes. I'm not going to publish the monolith PR, but in case it helps to see all of the changes in one place:

DRAFT: Fix build errors in TypeScript 5.3 #30796

Here are all of the split-out PRs:

codesandbox-ci · 2024-03-18T21:07:26Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

fabricteam · 2024-03-18T21:07:55Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-03-18T21:09:55Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react` ActivityItem	`68.833 kB` `22.613 kB`
`react` Announced	`36.473 kB` `12.628 kB`
`react` Autofill	`15.365 kB` `4.743 kB`
`react` Breadcrumb	`196.083 kB` `58.757 kB`
`react` Button	`190.127 kB` `55.019 kB`
`react` ButtonGrid	`175.918 kB` `53.25 kB`
`react` Calendar	`118.756 kB` `36.101 kB`
`react` Callout	`80.866 kB` `26.564 kB`
`react` Check	`51.062 kB` `17.152 kB`
`react` Checkbox	`57.791 kB` `19.17 kB`
`react` ChoiceGroup	`63.339 kB` `20.824 kB`
`react` ChoiceGroupOption	`56.601 kB` `18.695 kB`
`react` Coachmark	`89.704 kB` `28.407 kB`
`react` Color	`7.737 kB` `3.106 kB`
`react` ColorPicker	`129.984 kB` `40.589 kB`
`react` ComboBox	`245.355 kB` `70.51 kB`
`react` CommandBar	`197.362 kB` `58.46 kB`
`react` ContextualMenu	`150.967 kB` `46.982 kB`
`react` DatePicker	`180.318 kB` `54.947 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`225.886 kB` `64.647 kB`
`react` Dialog	`205.294 kB` `61.428 kB`
`react` Divider	`17.63 kB` `6.234 kB`
`react` DocumentCard	`211.08 kB` `62.793 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`33.345 kB` `11.166 kB`
`react` Dropdown	`227.732 kB` `66.867 kB`
`react` ExtendedPicker	`94.987 kB` `27.297 kB`
`react` Fabric	`39.75 kB` `13.688 kB`
`react` Facepile	`205.992 kB` `61.67 kB`
`react` FloatingPicker	`236.233 kB` `67.368 kB`
`react` FocusTrapZone	`15.831 kB` `5.54 kB`
`react` FocusZone	`53.259 kB` `16.869 kB`
`react` Grid	`175.918 kB` `53.25 kB`
`react` GroupedList	`131.636 kB` `39.657 kB`
`react` GroupedListV2	`119.324 kB` `36.822 kB`
`react` HoverCard	`93.735 kB` `29.778 kB`
`react` Icon	`49.74 kB` `16.603 kB`
`react` Icons	`65.829 kB` `24.212 kB`
`react` Image	`44.79 kB` `15.024 kB`
`react` Keytip	`78.588 kB` `25.825 kB`
`react` KeytipData	`13.585 kB` `4.418 kB`
`react` KeytipLayer	`100.422 kB` `31.128 kB`
`react` Keytips	`103.175 kB` `32.07 kB`
`react` Label	`36.347 kB` `12.639 kB`
`react` Layer	`45.683 kB` `15.585 kB`
`react` Link	`37.673 kB` `12.993 kB`
`react` List	`38.136 kB` `12.004 kB`
`react` MarqueeSelection	`72.119 kB` `21.676 kB`
`react` MessageBar	`184.707 kB` `55.523 kB`
`react` Modal	`90.409 kB` `29.213 kB`
`react` Nav	`183.442 kB` `55.093 kB`
`react` OverflowSet	`31.044 kB` `10.593 kB`
`react` Overlay	`38.784 kB` `13.401 kB`
`react` Panel	`194.946 kB` `58.34 kB`
`react` Persona	`111.705 kB` `35.58 kB`
`react` PersonaCoin	`111.705 kB` `35.58 kB`
`react` PersonaPresence	`55.928 kB` `18.715 kB`
`react` Pickers	`287.603 kB` `80.607 kB`
`react` Pivot	`184.252 kB` `55.823 kB`
`react` Popup	`12.032 kB` `4.114 kB`
`react` Positioning	`21.821 kB` `7.334 kB`
`react` PositioningContainer	`70.754 kB` `22.84 kB`
`react` ProgressIndicator	`37.498 kB` `12.906 kB`
`react` Rating	`78.989 kB` `25.18 kB`
`react` ResizeGroup	`13.286 kB` `4.365 kB`
`react` ResponsiveMode	`8.078 kB` `2.95 kB`
`react` ScrollablePane	`53.538 kB` `17.113 kB`
`react` SearchBox	`182.982 kB` `55.1 kB`
`react` SelectableOption	`724 B` `413 B`
`react` SelectedItemsList	`226.659 kB` `66.321 kB`
`react` Selection	`41.202 kB` `11.839 kB`
`react` Separator	`33.397 kB` `11.529 kB`
`react` Shimmer	`47.265 kB` `15.632 kB`
`react` ShimmeredDetailsList	`236.654 kB` `67.42 kB`
`react` Slider	`55.575 kB` `18.574 kB`
`react` SpinButton	`186.661 kB` `56.205 kB`
`react` Spinner	`39.691 kB` `13.815 kB`
`react` Stack	`40.761 kB` `13.931 kB`
`react` Sticky	`32.064 kB` `10.324 kB`
`react` Styling	`44.812 kB` `14.688 kB`
`react` SwatchColorPicker	`186.166 kB` `56.724 kB`
`react` TeachingBubble	`200.004 kB` `59.345 kB`
`react` Text	`35.931 kB` `12.486 kB`
`react` TextField	`78.587 kB` `24.642 kB`
`react` Theme	`42.456 kB` `13.773 kB`
`react` ThemeGenerator	`12.34 kB` `4.106 kB`
`react` TimePicker	`235.197 kB` `68.29 kB`
`react` Toggle	`44.17 kB` `15.346 kB`
`react` Tooltip	`84.225 kB` `27.277 kB`
`react` Utilities	`71.851 kB` `21.843 kB`
`react` Viewport	`22.945 kB` `7.292 kB`
`react` WeeklyDayPicker	`98.762 kB` `30.828 kB`
`react` WindowProvider	`1.059 kB` `541 B`

_{🤖 This report was generated against 5e690201797c6b1ce34ac59638fd4a77a0f5a2b3}

fabricteam · 2024-03-18T23:01:45Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	625	642	5000
Breadcrumb	mount	1683	1683	1000
Checkbox	mount	1700	1669	5000
CheckboxBase	mount	1459	1463	5000
ChoiceGroup	mount	2895	2954	5000
ComboBox	mount	649	659	1000
CommandBar	mount	6200	6237	1000
ContextualMenu	mount	12736	12714	1000
DefaultButton	mount	751	725	5000
DetailsRow	mount	2212	2232	5000
DetailsRowFast	mount	2184	2226	5000
DetailsRowNoStyles	mount	2018	2022	5000
Dialog	mount	2751	2760	1000
DocumentCardTitle	mount	230	213	1000
Dropdown	mount	1971	1972	5000
FocusTrapZone	mount	1144	1135	5000
FocusZone	mount	1065	1084	5000
GroupedList	mount	41440	41686	2
GroupedList	virtual-rerender	19818	19934	2
GroupedList	virtual-rerender-with-unmount	50526	50783	2
GroupedListV2	mount	222	224	2
GroupedListV2	virtual-rerender	208	211	2
GroupedListV2	virtual-rerender-with-unmount	218	223	2
IconButton	mount	1095	1076	5000
Label	mount	339	333	5000
Layer	mount	2763	2697	5000
Link	mount	395	395	5000
MenuButton	mount	937	933	5000
MessageBar	mount	21289	21191	5000
Nav	mount	1937	1949	1000
OverflowSet	mount	784	779	5000
Panel	mount	2045	1818	1000
Persona	mount	755	774	1000
Pivot	mount	870	852	1000
PrimaryButton	mount	859	846	5000
Rating	mount	4618	4628	5000
SearchBox	mount	887	920	5000
Shimmer	mount	1849	1899	5000
Slider	mount	1323	1287	5000
SpinButton	mount	2893	2901	5000
Spinner	mount	380	390	5000
SplitButton	mount	1865	1848	5000
Stack	mount	401	401	5000
StackWithIntrinsicChildren	mount	859	849	5000
StackWithTextChildren	mount	2576	2641	5000
SwatchColorPicker	mount	6168	6206	5000
TagPicker	mount	1406	1468	5000
Text	mount	368	375	5000
TextField	mount	956	948	5000
ThemeProvider	mount	837	819	5000
ThemeProvider	virtual-rerender	579	579	5000
ThemeProvider	virtual-rerender-with-unmount	1262	1284	5000
Toggle	mount	610	596	5000
buttonNative	mount	190	193	5000

fix(react): Build errors in TypeScript 5.3

02ac229

behowell added the Area: Typescript label Mar 18, 2024

behowell self-assigned this Mar 18, 2024

github-actions bot added this to the March Project Cycle Q1 2024 milestone Mar 18, 2024

This was referenced Mar 18, 2024

fix(codemods): Fix build errors in TypeScript 5.3.3 #30806

Merged

fix(date-time-utilities): Fix build errors in TypeScript 5.3.3 #30807

Merged

Merge branch 'master' into ts5/react

3f2a8c3

This was referenced Mar 18, 2024

DRAFT: Fix build errors in TypeScript 5.3 #30796

Closed

DRAFT(xplat): Fix build errors in TypeScript 5.3 #30797

Closed

behowell marked this pull request as ready for review March 20, 2024 15:58

behowell requested a review from a team as a code owner March 20, 2024 15:58

khmakoto approved these changes Mar 20, 2024

View reviewed changes

behowell merged commit 8210ffd into microsoft:master Mar 21, 2024

behowell deleted the ts5/react branch March 21, 2024 19:28

JamesBurnside mentioned this pull request Mar 27, 2024

Update fluent and type-fest dependencies to latest Azure/communication-ui-library#4347

Merged

robertpenner pushed a commit to robertpenner/fluentui that referenced this pull request Apr 11, 2024

fix(react): Fix build errors in TypeScript 5.3.3 (microsoft#30809)

5dbb932

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react): Fix build errors in TypeScript 5.3.3#30809

fix(react): Fix build errors in TypeScript 5.3.3#30809
behowell merged 2 commits intomicrosoft:masterfrom
behowell:ts5/react

behowell commented Mar 18, 2024 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Mar 18, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 18, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 18, 2024 •

edited

Loading

Uh oh!

fabricteam commented Mar 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

behowell commented Mar 18, 2024 • 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!

codesandbox-ci bot commented Mar 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Mar 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Mar 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Mar 18, 2024

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

behowell commented Mar 18, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 18, 2024 •

edited

Loading

fabricteam commented Mar 18, 2024 •

edited

Loading

fabricteam commented Mar 18, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)