[Bug]: Error on @fluentui/react while running tsc with TypeScript 4.8

[zachhats]

Library

React / v8 (@fluentui/react)

System Info

C:\Sandbox\fluentui-issue-26289-repro>npx envinfo --system --npmPackages '{@fluent/*}' --browsers
Need to install the following packages:
  envinfo@7.8.1
Ok to proceed? (y) y

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i7-7820X CPU @ 3.60GHz
    Memory: 39.32 GB / 63.73 GB
  Browsers:
    Chrome: 109.0.5414.120
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.70), ChromiumDev (111.0.1633.0)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

no

Reproduction

https://github.com/zachhats/fluentui-issue-26289-repro

Bug Description

This looks very similar to #26289 but I was asked to open a new issue as we're using a different fluent package.

Actual Behavior

I get the following error, all I am doing is loading an empty theme and rendering a super basic react component:

C:\Sandbox\fluentui-issue-26289-repro>yarn run build
yarn run v1.22.19
warning package.json: No license field
$ tsc
node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:64:145 - error TS2344: Type 'TStyleSet' does not satisfy the constraint 'IStyleSet<TStyleSet>'.
  Type 'TStyleSet' is not assignable to type '{ [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }'.

64 export declare function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                                                                                                                                   ~~~~~~~~~

  node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:64:38
    64 export declare function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                            ~~~~~~~~~
    This type parameter might need an `extends { [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }` constraint.
  node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:64:38
    64 export declare function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                            ~~~~~~~~~
    This type parameter might need an `extends IStyleSet<TStyleSet>` constraint.

node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:74:198 - error TS2344: Type 'TStyleSet1 & TStyleSet2' does not satisfy the constraint 'IStyleSet<TStyleSet1 & TStyleSet2>'.
  Type 'TStyleSet1 & TStyleSet2' is not assignable to type '{ [P in keyof Omit<TStyleSet1 & TStyleSet2, "subComponentStyles">]: IStyle; }'.

74 export declare function mergeCssSets<TStyleSet1, TStyleSet2>(styleSets: [TStyleSet1 | false | null | undefined, TStyleSet2 | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet1 & TStyleSet2>;
                                                                                                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:88:49 - error TS2344: Type 'TStyleSet1 & TStyleSet2 & TStyleSet3' does not satisfy the constraint 'IStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>'.
  Type 'TStyleSet1 & TStyleSet2 & TStyleSet3' is not assignable to type '{ [P in keyof Omit<TStyleSet1 & TStyleSet2 & TStyleSet3, "subComponentStyles">]: IStyle; }'.

88 ], options?: IStyleOptions): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:113:144 - error TS2344: Type 'TStyleSet' does not satisfy the constraint 'IStyleSet<TStyleSet>'.
  Type 'TStyleSet' is not assignable to type '{ [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }'.

113 export declare function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                                                                                                                                   ~~~~~~~~~

  node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:113:38
    113 export declare function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                             ~~~~~~~~~
    This type parameter might need an `extends { [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }` constraint.
  node_modules/@fluentui/merge-styles/lib/mergeStyleSets.d.ts:113:38
    113 export declare function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | false | null | undefined], options?: IStyleOptions): IProcessedStyleSet<TStyleSet>;
                                             ~~~~~~~~~
    This type parameter might need an `extends IStyleSet<TStyleSet>` constraint.

node_modules/@fluentui/utilities/lib/styled.d.ts:17:97 - error TS2344: Type 'TStyleSet' does not satisfy the constraint 'IStyleSet<TStyleSet>'.
  Type 'TStyleSet' is not assignable to type '{ [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }'.

17 export declare type StyleFunction<TStyleProps, TStyleSet> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {
                                                                                                   ~~~~~~~~~

  node_modules/@fluentui/utilities/lib/styled.d.ts:17:48
    17 export declare type StyleFunction<TStyleProps, TStyleSet> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {
                                                      ~~~~~~~~~
    This type parameter might need an `extends { [P in keyof Omit<TStyleSet, "subComponentStyles">]: IStyle; }` constraint.
  node_modules/@fluentui/utilities/lib/styled.d.ts:17:48
    17 export declare type StyleFunction<TStyleProps, TStyleSet> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {
                                                      ~~~~~~~~~
    This type parameter might need an `extends IStyleSet<TStyleSet>` constraint.

node_modules/@fluentui/utilities/lib/styled.d.ts:19:60 - error TS2344: Type 'TStyleSet' does not satisfy the constraint 'IStyleSet<TStyleSet>'.

19     __cachedInputs__: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[];
                                                              ~~~~~~~~~

  node_modules/@fluentui/utilities/lib/styled.d.ts:17:48
    17 export declare type StyleFunction<TStyleProps, TStyleSet> = IStyleFunctionOrObject<TStyleProps, TStyleSet> & {
                                                      ~~~~~~~~~
    This type parameter might need an `extends IStyleSet<TStyleSet>` constraint.


Found 6 errors in 2 files.

Expected Behavior

tsc does not error from type issues within @fluentui/react and @fluentui/merge-styles

Logs

No response

Requested priority

Blocking

Products/sites affected

PowerQueryOnline

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[zachhats]

This is blocking upgrade to TypeScript 4.8 for us. We do not see the issue with TypeScript 4.7.

[micahgodbolt]

Work to support TS 4.8 is planned to start soon. You can follow the progress here #25488.

[Hotell]

can you try adding https://www.typescriptlang.org/tsconfig#skipLibCheck to your config ?

[zachhats]

@Hotell that seems to work, although i don't think we'd like to do that long term. i can chat internally with folks and see what they think

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.