[Bug]: index.d.ts for @fluentui/react-provider references a non-dependency

[D4N14L]

Component

FluentProvider

Package version

9.17.6

React version

17.0.2

Environment

System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (16) x64 AMD EPYC 7763 64-Core Processor
Memory: 58.73 GB / 62.78 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Browsers:
Chrome: 128.0.6613.113

Current Behavior

Missing required dependency @fluentui/tokens in package @fluentui/react-provider. The package is referenced in the index.d.ts but not present in the dependencies.

Expected Behavior

Package should have a reference to @fluentui/tokens

Reproduction

Import any export from @fluentui/react-provider and it will fail

Steps to reproduce

1. Import any export from @fluentui/react-provider in a TypeScript project
2. Failure with error message stating that the package could not be found

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

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.

[D4N14L]

Looking further, it seems that the types output by SWC are incorrect and are causing the reference to show up in the API-Extractor output that gets included in the package.

[v-iabuassab]

In Suggested severity, a possible workaround is mentioned. What is it exactly?

[D4N14L]

@v-iabuassab we use the PNPM package manager in our repository, so we can take a couple approaches:

• Create a .pnpmfile.cjs entry which essentially patches the package.json for the package to contain a version of the referenced package
• Create a PNPM patch of the dependency which directly modifies the package code during installation to replace the Partial<Theme> reference with a PartialTheme reference sourced from @fluentui/react-provider

We opted for the latter, since it is what the SWC compilation should be doing but apparently isn't.

[D4N14L]

After some more investigation, it seems that this is happening because SWC is doing some incorrect type inference on the export from FluentProvider.tsx. If an explicit type was defined on the export, SWC would likely handle the export more gracefully. Though having said that, it probably isn't a great approach to use type inference + experimental typings generation in SWC together, since it causes issues like this.

[khmakoto]

Hi @D4N14L, do you have any mock repo you could share with the correct configuration setup where this happens that I could take a look at?

[D4N14L]

@khmakoto I can put a mock repo together if you would like, but this issue should be visible from just inspecting the @fluentui/react-provider typings and comparing to the dependencies to the imported typings. In this repo, if you build the project and take a look at the SWC-produced .d.ts files you'll also notice this issue being present from the inferred type exported here:

fluentui/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.tsx

Line 8 in e8a616e

export const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {