Support React 18 #1900
Comments
|
Hi @juandgarin, thank you for filing this issue. I will look into this today. |
|
Hi @juandgarin, our dependency on fluent ui library restricts our package from using React 18 or higher. What is your use case for |
|
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+ |
|
Actually, let's keep this open to track when FluentUI goes to React 18 and then this issue will be actionable: microsoft/fluentui#22592 |
|
It is still unclear if Fluentv8 will gain React18 support at all: microsoft/fluentui#22592 (comment) |
|
I am also facing the same issue when I followed these steps. https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-uicomponents--page |
|
@sai0909 Can you try downgrading to React v17 to see if it fixes your issue? |
|
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@17almost fixes the issue. If you modify the generated 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. |
|
Honestly, this is a fairly large feature gap in |
|
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. |
|
@piotrzaborow we're following up on both forks:
I learnt that it is possible to set React versions via CRA templates, so we will explore that option in the short term. |
|
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? |
|
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. |
|
@micahgodbolt - Do you have plans or know when the communication-ui-library will be upgraded to using v9 of Fluent UI ? |
|
Hi @micahgodbolt, while the
Do you know when the updated peer dependencies for |
|
@develohpanda we have made progress on most dependencies, but we have a final blocker from permitting react 18 as a peer dependency on microsoft/fluentui#25651 |
|
@JamesBurnside that's awesome! Please let me know if there's anything I can do to help it along. :) |
|
Yeah the only reason our projects are held up for react 18 is this package please re consider supporting react 18 |
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? |
|
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. |
|
This should have been updated before React 17 went EOL. Can't believe 18 is still not supported over a year later! |
|
+1 this is a huge blocker. The silence and missing official statement is also a raising concern. |
|
All the samples and sdks I use is for react 18+ but this... |
|
@prprabhu-ms please remove the blocked label from this issue as fluent-ui has been updated to React 18 microsoft/fluentui#22592 |
|
Greetings Friends, we want to thank the community for working with us and providing valuable feedback for us to understand where we should be prioritizing our work. To recap some of the previous discussion above, To address to problem, we have been working with our partner teams in Fluent over the last several months to build a migration strategy to Fluent v9. This migration will allow However, we expect the full migration to Fluent React v9 to take some time. Therefore, to help unblock you, we are putting in motion a short-term plan mitigate the issue with React 18. Come join the discussion here: Unblocking react 18 · Azure/communication-ui-library · Discussion #2939 · GitHub We really appreciate the overall support as we work towards solving this issue! |
|
Good news something is going on! |
|
Hi folks, we have released |
|
Hi @JamesBurnside, I'm testing the new version. Everything looks good but crashes in React strict mode when the ChatComposite is removed. ...
{chatAdapter && <ChatComposite
fluentTheme={customTheme}
onFetchAvatarPersonaData={() => Promise.resolve(avatarPersonaData)}
options={{ topic: false }}
adapter={chatAdapter}
/>}
...And when the chat ends, it calls the chatAdapter I also see this warning when it is mounted. My stack: Complete errors: Mounting |
|
@DercilioFontes thanks for raising this, looking into it appears to be caused here when the react n* theme provider is unmounted. We'll work with the folks at fluent to see what the best resolution is |
|
@DercilioFontes i had similar issue when i set toggle rendering on ACS Components(using &&). style={{
visibility: chatAdapter ? "visible" : "hidden",
}}I'm not sure your case is same as mine but i hope this helps 😊 |
|
@JamesBurnside Does 1.6.0 now fully support React 18? |
|
We have bumped the peer deps to unblock react 18 usage in 1.6.0. However, we haven't fixed the strict mode issue above. If you are using react 18 in your application we recommend disabling strict mode (though strict mode doesn't run in production anyway), react 18 should be fully working as expected without strict mode. |
|
any updates on this? (with strict mode) |
We are going to remove the dependency (fluent northstar) causing the strict mode issue. This change is non-trivial however, and will take some time to get in. You can track this here #3578. |
|
Closing as we released version 1.9.0-beta.1 this includes final support for react 18 as we removed the dep for Fluent Northstar. please check it out! 😊 please reopen the issue if there are more complications with react 18 https://www.npmjs.com/package/@azure/communication-react/v/1.9.0-beta.1?activeTab=versions |
and others
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
The text was updated successfully, but these errors were encountered: