Support for React 18

[nikeee]

Describe the feature that you would like added

Support for React 18, which just released: https://github.com/facebook/react/releases/tag/v18.0.0

What component or utility would this be added to

All of them

Have you discussed this feature with our team, and if so, who

Nope.

Additional context/screenshots

Installing React 18 in the project and using fluentui yields (peer?) dependency problems:

├─┬ @fluentui/[email protected]
│ ├─┬ @fluentui/[email protected]
│ │ └── [email protected] deduped invalid: ">=16.8.0 <18.0.0" from node_modules/@fluentui/react, "^16.0.0 || ^17.0.0" from node_modules/react-spinners, "^16.8.0  || ^17.0.0" from node_modules/react-use, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/foundation-legacy
│ ├─┬ @fluentui/[email protected]
│ │ └── [email protected] deduped invalid: ">=16.8.0 <18.0.0" from node_modules/@fluentui/react, "^16.0.0 || ^17.0.0" from node_modules/react-spinners, "^16.8.0  || ^17.0.0" from node_modules/react-use, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/foundation-legacy, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-focus
│ ├─┬ @fluentui/[email protected]
│ │ └── [email protected] deduped invalid: ">=16.8.0 <18.0.0" from node_modules/@fluentui/react, "^16.0.0 || ^17.0.0" from node_modules/react-spinners, "^16.8.0  || ^17.0.0" from node_modules/react-use, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/foundation-legacy, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-focus, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-hooks
│ ├─┬ @fluentui/[email protected]
│ │ └── [email protected] deduped invalid: ">=16.8.0 <18.0.0" from node_modules/@fluentui/react, "^16.0.0 || ^17.0.0" from node_modules/react-spinners, "^16.8.0  || ^17.0.0" from node_modules/react-use, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/foundation-legacy, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-focus, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-hooks, ">=16.8.0 <18.0.0" from node_modules/@fluentui/react/node_modules/@fluentui/react-window-provider
│ ├─┬ @fluentui/[email protected]
│ │ ├─┬ @fluentui/[email protected]
│ │ │ └── [email protected]
│ │ └─┬ @fluentui/[email protected]
│ │   └── [email protected] deduped
│ ├─┬ @fluentui/[email protected]

[WhiteAdy]

Even if I install the library with --force, some of the components functionality break (e.g the ContextualMenu doesn't show the menu on press)

[khowling]

Even if I install the library with --force, some of the components functionality break (e.g the ContextualMenu doesn't show the menu on press)

are you using create-react-app? try removing <React.StrictMode> in index.js

[khowling]

now react18 is on npm, also this issue for ssr support #18634 (api changed to renderToPipeableStream)

[cleferman]

Even if I install the library with --force, some of the components functionality break (e.g the ContextualMenu doesn't show the menu on press)

are you using create-react-app? try removing <React.StrictMode> in index.js

I can confirm removing strict mode 'fixes' the ContextualMenu.

I guess it has something to do with this change:

With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

Before React18, components in strict mode were not unmounted and then re-mounted. Is there any way we could still use strict mode?

[khowling]

Even if I install the library with --force, some of the components functionality break (e.g the ContextualMenu doesn't show the menu on press)

use --legacy-peer-deps rather than --force

[dayadam]

When will fluent UI support React 18?

[micahgodbolt]

I have a PR open, working through review. https://github.com/microsoft/fluentui/pull/22261

[mrmeku]

Just to say it, there is a breaking change to the types in React 18 where components need to declare if they support children in there property type definitions (by using the generic PropsWithChildren).

So as part of react 18 support for typescript users, all components which support children will need to be updated

Edit: See https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

[schemburkar]

I can confirm removing strict mode 'fixes' the ContextualMenu.

Same for me. Using React 18, breaks ContextualMenu and is fixed by turning off strict mode.

(Side Note: I was using react 18 rc without any issues, the official version breaks this)

For nextjs folks that get redirected to this issue, you can set strict mode false in next.config.js

module.exports = {
    reactStrictMode: false,
}

[AnjaliAgarwal123]

Contextual Menu and TooltipHost imported from fluent ui is not working after React 18 released..tried removing React.StrictMode from index.tsx but no luck..

[micahgodbolt]

Support for React 18 is going to be a bit of work. I'm starting to track that work in #22592

[AnjaliAgarwal123]

@micahgodbolt "@types/react": "^17.0.41" we are doing this in package.json but still it seems somewhere fluent ui is referring to react 18.0.1 importing contextual menu from office-fabric is working fine but it is not working when importing from fluent ui.. so can you please suggest how to override fluent ui peer dependencies...

[denis-sokolov]

@micahgodbolt, this incorrectly closed automatically.

[micahgodbolt]

Haha, I wrote "this doesn't fix #" and didn't even think that github would still see "fix #" and close the issue. Reopening.

[JonSilver]

Hi @micahgodbolt et al, could we possibly get an update with respect to progress on this?

[micahgodbolt]

We'll be looking into this in the upcoming quarter now that 9.0 is officially released. It's not going to be a small amount of effort, and as our internal apps won't be moving to 18 for some time, it is not at the top of our priority list. We've updated our create-react-app template to downgrade react to 17, and we'll do our best to keep the community up to date as we evaluate the work involved.

[micahgodbolt]

Even if I install the library with --force, some of the components functionality break (e.g the ContextualMenu doesn't show the menu on press)

ContextualMenu and other Callout related controls have been fixed in https://github.com/microsoft/fluentui/pull/24093

We're getting closer to React 18 support. I've fixed all of the issues I've identified so far. Still want to do a bit more testing before we can be confident of this change.

[Pooja-G28]

The issue exists in Dialog and DialogFooter component of fluent UI. Property 'children' does not exist on type 'IntrinsicAttributes & IDialogProps'

When can we expect the fix for this

[schemburkar]

The issue exists in Dialog and DialogFooter component of fluent UI. Property 'children' does not exist on type 'IntrinsicAttributes & IDialogProps'

I'm using a workaround till this is fixed by the fluent ui team

import { Dialog, IDialogProps } from '@fluentui/react'; 
 import React, { ReactNode } from 'react'; 
  
  
 type IDialogPropsEx = IDialogProps & { children: ReactNode; }; 
 export const DialogEx: React.FunctionComponent<IDialogPropsEx> = ({ children, ...props }) => { 
     return <Dialog {...props}>{children}</Dialog>; 
 }; 
  
  
 export default DialogEx;

[khowling]

Any news on React18 support? I'd love to be able to demo fluentui components with Azure Static Webapps, but create-react-app is version18, and the hard dependency on <18.0.0.

Downgrading react or using --legacy-peer-deps just creates a lot of friction in the demo process :(

[micahgodbolt]

We're currently setting up React 18 testing environments in our repo so that we can be sure that any fixes we make to support React 18 will continue to function properly.

[micahgodbolt]

Support for React 18 within Fluent UI v8 and v9 have been merged via #22592. On next release you will be able to install those packages into React 18 apps.