Support React 18

[juandgarin]

When i try to install the library, it returns me an error indicating that there are dependencies that cant resolve.

Anyone with the same problem?

I think it is a React 18 issue

[mgamis-msft]

Hi @juandgarin, thank you for filing this issue. I will look into this today.

[mgamis-msft]

Hi @juandgarin, our dependency on fluent ui library restricts our package from using React 18 or higher. What is your use case for [email protected]? Is it possible to use another version of backoffice that does not rely on React 18?

[prprabhu-ms]

Hi @juandgarin I don't expect us to be able to lift the < React18 requirement easily at the moment (Fluentv8 recently moved to React 17, and I'm not aware of any plans to move beyond React18+)

Closing this issue as it is not currently actionable, but please feel free re-open with any more information / insight you have for the need for React 18+

[prprabhu-ms]

Actually, let's keep this open to track when FluentUI goes to React 18 and then this issue will be actionable: https://github.com/microsoft/fluentui/issues/22592

[prprabhu-ms]

It is still unclear if Fluentv8 will gain React18 support at all: https://github.com/microsoft/fluentui/issues/22592#issuecomment-1113633465

[sai0909]

I am also facing the same issue when I followed these steps. https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-uicomponents--page

[prprabhu-ms]

@sai0909 Can you try downgrading to React v17 to see if it fixes your issue?

[prprabhu-ms]

It is a big problem that anybody using our quickstart will currently hit the problem posted in OP.

I confirmed that downgrading the app to React 17 with

npm install react@17 react-dom@17 @testing-library/react@12 @types/react@17 @types/react-dom@17

almost fixes the issue. The problem is that react-dom had a breaking change from v17 -> v18 so that the create-react-app generated boilerplate doesn't work with React 17.

If you modify the generated index.tsx to be

import React from 'react';
import { render }  from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  container
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Then the quickstart works correctly.

But... that is terrible devX. Still looking for less manual workarounds.

[prprabhu-ms]

Honestly, this is a fairly large feature gap in create-react-app. There is no way to use an older version of react libraries with that tool. Maybe they'll have a fix for it soon... https://github.com/facebook/create-react-app/issues/12269

[piotrzaborow]

It's not only about CRA. Next.js has their own CLI for creating new apps and usage of latest version will always bring React 18+.

I understand the complexity of migration, but not supporting new versions of React just places Fluent UI React as no-go for new React-based projects.

Of course I can downgrade, but I will lack of new Next.js features.

[prprabhu-ms]

@piotrzaborow we're following up on both forks:

• Track Fluent UI React upgrade to React 18
• Deliver a workaround that unbreaks new apps using @azure/communication-react right now.

I learnt that it is possible to set React versions via CRA templates, so we will explore that option in the short term.

[micahgodbolt]

I'm working on React 18 support in Fluent UI right now. The changes in Strict mode are causing a good bit of churn, so we have some work ahead of us to get all of our controls working properly in React 18. For clarity, what version of Fluent UI is your package dependent on?

[micahgodbolt]

It took longer than expected, but peer deps have been updated. Both v8 and v9 will be usable within react 18 upon the next release.

[krista-m-bledsoe]

@micahgodbolt - Do you have plans or know when the communication-ui-library will be upgraded to using v9 of Fluent UI ?

[develohpanda]

Hi @micahgodbolt, while the @fluentui/react warning has now disappeared for me, I've still got a few others.

Do you know when the updated peer dependencies for @azure/communication-react and bundled dependency upgrades, will be published? For example, I can see that @fluentui/react-northstar is a fixed dependency in @azure/communication-react at v0.61.0, however they have published v0.65.0.

[JamesBurnside]

@develohpanda we have made progress on most dependencies, but we have a final blocker from permitting react 18 as a peer dependency on https://github.com/microsoft/fluentui/issues/25651

[develohpanda]

@JamesBurnside that's awesome! Please let me know if there's anything I can do to help it along. :)

[hyunoosung]

Yeah the only reason our projects are held up for react 18 is this package please re consider supporting react 18

[micahgodbolt]

Hi @micahgodbolt, while the @fluentui/react warning has now disappeared for me, I've still got a few others.

Do you know when the updated peer dependencies for @azure/communication-react and bundled dependency upgrades, will be published? For example, I can see that @fluentui/react-northstar is a fixed dependency in @azure/communication-react at v0.61.0, however they have published v0.65.0.

The northstar project was originally under under Teams engineering. @jurokapsiar would be the best one to talk to about React 18 support. Do you know how critical the northstar dependency is for your package?

[develohpanda]

Presumably quite important as we are using the acs libraries to embed Teams within our site. I could try and track that dependency through the GitHub packages.

[hyunoosung]

It's been almost a year since the first report. May I ask if this has any progress?

[micahgodbolt]

I would suggest looking to see if you can remove the northstar dependency from this library. You should be able to migrate most Northstar code to v9 now.

https://react.fluentui.dev/?path=/docs/concepts-migration-from-v0-components-avatar-migration--page

[FullStackSteve]

We need React 18 support as it preventing us from moving forward to upgrade our other application to React, as we have strict policies to keep package versions consistent across our applications.

It's also preventing us from using Next.js

[norbert-guider]

Basically, this is the only reason our applications are held up for react 18.

[jakub-guider]

This is a huge blocker. We're now stuck between requiring React 18 for our development needs, other packages, using Next.js on one side and just azure communication not supporting React 18 on the other.

[FullStackSteve]

@prprabhu-ms is this still blocked?

Looks like fluentui now fully supports React 18 (albeit @fluentui/react-northstar is now discontinued so as @micahgodbolt suggests it would need to be removed from Azure/communication-ui-library so that React 18 can be supported)

[hyunoosung]

@prprabhu-ms is this still blocked?

Looks like https://github.com/microsoft/fluentui fully supports React 18 (albeit @fluentui/react-northstar is now discontinued so as @micahgodbolt suggests it would need to be removed from Azure/communication-ui-library so that React 18 can be supported)

Does it mean that they only need to update the fluent ui dependency? Or is there some migration required? It feels like taking forever.

[DercilioFontes]

I’m using the ChatComposite passing the ChatAdapter in a Stack that I couldn’t see how to upgrade to FluentUI v9.

The docs says that it doesn’t support React 18!

Currently the Azure Communications UI library supports react versions >=16.8.0 and < 18

https://azure.github.io/communication-ui-library/?path=/docs/setup-communication-react--page

[yxor]

any updates on this?

[realjesset]

i am working on lots of projects related to this library. May we know the status on this or if there is anything we can contribute to make this transition faster?