[v5] Support React 19 in Material UI v5

[DiegoAndai]

Backport the React 19 related changes from v6 to v5 so we support the upcoming React release on v5.

List of PRs to backport (Merged | Open):

• Original: #42689 - Cherry-pick: #42709
• Original: #42447 - Cherry-pick: #42847
• Original: #42099 - Cherry-pick: #42241
• Original: #42752 - Cherry-pick: #42851
• Original: #42703 - Cherry-pick: #42849
• Original: #42757 - Cherry-pick: #42852
• Original: #42639 - Cherry-pick: #42766
• Original: #42775 - Cherry-pick: #42776
• Original: #42780 - Cherry-pick: #42813
• Original: #42691 - Cherry-pick: #42854
• Original: #42047 - Cherry-pick: #42846
• Original: #42784 - Cherry-pick: #42853
• Original: #42706 - Cherry-pick: #42850
• Original: #42744 - Cherry-pick: #42855
• Original: #42741 - Cherry-pick: #42856
• Original: #42346 - Cherry-pick: #44475
• Original: #42818 - Cherry-pick: #44543
• Original: #43132 - Cherry-pick: #44543
• Original: #43155 - Cherry-pick: #44557
• Original: #43189 - Cherry-pick: #44561
• Original: #43204 - Cherry-pick: #44577
• Original: #43205 - No cherry-pick needed, it was reverted at Bump styled-components to ^6.1.13 #43654
• Original: #43211 - Cherry-pick: #44557
• Original: #43269 - Cherry-pick: #44557
• Original: #43276 - Cherry-pick: #44577
• Original: #43282 - Cherry-pick: #44557
• Original: #43022 - Cherry-pick: #44543
• Original: #43402 - Cherry-pick: #44577
• Original: #44034 - Cherry-pick: #44543
• Original: #44035 - Cherry-pick: #44577
• Original: #44043 - Cherry-pick: #44577
• Original: #43216 - Cherry-pick: #44578
• Original: #44593 - Cherry-pick: #44595
• Original: #42824 - No cherry-pick needed, moved to #44672
• Original: #43555 - Cherry-pick: #44720
• Original: #44519 - Cherry-pick: #44720
• Original: #44672 - Cherry-pick: #44720

[DiegoAndai]

On hold until React 19 is stable and #42824 is merged. With the already backported changes, users should be ready to start trying v5 with React 19.

[julianCast]

Hi! Any updates when this will be released? v5 or v6? Thanks!

[DiegoAndai]

Hey @julianCast, this was already released in v6.

Expect the v5 release early next week. That being said, you should already be able to use v5 with React 19; the only thing missing is some internal dependency changes.

[julianCast]

Hey @julianCast, this was already released in v6.

Expect the v5 release early next week. That being said, you should already be able to use v5 with React 19; the only thing missing is some internal dependency changes.

Thank you. I'm guessing one of those deps will be react-transition-group ? We are using v5.2.7 and after updating to React 19 we are getting:

Type error: Type 'React.ReactNode' is not assignable to type 'import("/Users/julian/Documents/GitHub/mycell/frontend/packages/opsa/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

import { Autocomplete } from "@mui/material";
  Type 'bigint' is not assignable to type 'ReactNode'.
 							<Autocomplete
 							  ...
 							   renderGroup={(params) => (
  221 |                       <li key={params.key}>
  222 |                         <GroupHeader>{params.group}</GroupHeader>
> 223 |                         <GroupItems>{params.children}</GroupItems>
      |                                     ^
  224 |                       </li>

[DiegoAndai]

Just released @mui/material@5.16.12 which includes all the required backports from v6 to support React 19.

I'm closing this as completed. If you find any React 19 related issues with v5, please open a new issue with a minimal reproduction.

@julianCast we haven't found this type error in our tests. May I ask you to open a new issue for it so we can debug it? Thanks.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.