[Feature]: Support for React 19

[electrocnic]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Please add support for React versions >= 19.0.0 for react-components.

We want to upgrade to react 19 and this library still has < 19.0.0 in its package.json. React 19 is out for over half a year already.

Thank you so much!

Additional context

No response

Have you discussed this feature with our team

No response

Validations

• [x] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

None

[layershifter]

FYI it's not only about relaxing peerDependencies. There is a set of issues related to React 19 (use a tag to filter).

[electrocnic]

FYI it's not only about relaxing peerDependencies. There is a set of issues related to React 19 (use a tag to filter).

Got it.

Maybe I should open a new issue for that, but for now I first want to understand these symptoms, because maybe it is not necessary to open a new issue:

Once I update my @types/react package from 18.3.17 to 19.0.1 I can no longer use fluentUi's Components with automatic type inference:

(Parameter '_ev' implicitly has an 'any' type.)

As you can see, the Component will automatically resolve to <any> and all callback parameters will also resolve to any, even tho they are defined as

export declare const TagGroup: ForwardRefComponent<TagGroupProps>;
export declare type TagValue = string;
export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
    onDismiss?: TagDismissHandler<Value>;
    ...
}

when I control+click into them.

Here is the correct resolution of the types in the previous version (18.3.17) of @types/react: (And I know that the types for fluentUi should not come from this package but are already included in fluentUi, right?)

Do you know why this happens, or how I could possibly workaround this issue?

Or should I remain on React 18 for the time being and not upgrade to React 19 at all for now?

Thanks in advance.

EDIT: On a second glance, this might be related to the now deprecated forwardRef from React 19, and if this was removed in the types as well, it could explain why the type inference does not work any longer if fluentUi's current version still uses forwardRefs (as is visible in my screenshots above)?

[VlastimilKaluzaYsoft]

Hi, I read in comment that there is plan to deliver this feature in this FY. https://github.com/microsoft/fluentui/issues/33492#issuecomment-2573404710 I would like to ask what is progress on this issue and when we could test some preview?

Thanks a lot

[Khokhuda]

We also got blocked with migration to React 19 because of FluentUI v9 dependency. I am also curious about when to expect React 19 support. @tudorpopams mentioned in this comment that support may be added in this FY. But it may be more convenient to start migrating to different UI kit right now, than waiting for 4 or more months.

[krystofmatejka]

Hello, I would like to mention that this issue makes it very difficult to use Fluent UI on a new project, because React 19 is now the default in every code generator.

Let me know if I can help with the migration.

[pd-be]

Any update on this one? Is there any ETA?

Please don't get me wrong, but it's becoming a major blocker for many projects. There's a community of people eager to more the upgrade along, if only they were given some pointers on where to start or what needs solving. Keeping people in the dark doesn't do good.

For the others, here are some relevant discussions:

1. https://github.com/microsoft/fluentui/discussions/33607
2. https://github.com/microsoft/fluentui/discussions/33976

[layershifter]

There are three big issues related to React 19 support:

• #31429 [heroic to solve, Portals issue is a huge headache, looks like the last iteration #33174 is quite successful, needs additional testing in products]
• #33404 [medium to solve, needs a different form of validation]
• peerDependencies update [easy to solve, just update it once these are done]

[markat1]

@layershifter okay, so what is the timeframe for these 2 bugs? any dates on when we can expect React 19 support for fluentui 9?

[layershifter]

@markat1 no timeframe, at least from my side. https://github.com/microsoft/fluentui/discussions/33607#discussioncomment-12540776

[pink1903]

follow

[leonie-farmer-kb]

Hi, is there any update on this? It is becoming a big issue for us.

[wgorkaAtFarallon]

Hi, is there any update on this? This became a blocker for our project.

[layershifter]

There are three big issues related to React 19 support:

I just merged #33978 that fixes the second one. The fix will be available with the next release. It means that are no known runtime issues with Fluent v9 + React 19. However, peerDependencies + TS types are still a problem.

[nmccann]

@layershifter I just wanted to say thank you for putting in the effort for this, I understand there is still work to be done, but I appreciate the work that has already gone into supporting React 19. Thank you!

[erkenfelt]

I need to upgrade to React 19 and fluent is currently stopping me, any updates of when support will be implemented?

[dmytrokirpa]

Marking this as a duplicate. You can follow progress in #34768.