[React] Add React 19 support

[gperdomor]

Current Behavior

React generators use React 18.3.0

Expected Behavior

React generators should use React 19.0.0

GitHub Repo

No response

Steps to Reproduce

N/A

Nx Report

N/A

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[jaysoo]

We are going to include it in the next 20.3 version, so new workspaces will use React 19 and Next.js 15. We will not auto-migrate workspaces that are using older versions since that will break apps.

You are free to upgrade to React 19 now. If you run into any Nx specific issues please report them.

I'm converting this to a discussion as it is not a bug.

[yoanne2x]

When do we expect the migration to be done?

[alterhuman]

20.3.3 is already here but no react 19

[SoftwareDesign-Solution]

I found a workaround. Before you create a React application with npx nx g @nx/react:app apps/client, you have to run the two commands first, then the generator will not install version 18.

npm install react react-dom
npm install --save-dev @types/react @types/react-dom

[pratik149]

Any idea how to do it in an existing react nx project? I'm planning to update from 18 to 19.

[rostyslav-nabok]

Just follow the React migration guide, migration from 18 to 19 does not relate to NX

[travisfranklin]

If you wish to continue using @nx/react as a generator while using react 19 you end up with peer deps issues. This is due to @module-federation/node not currently supporting React v19.

 WARN  Issues with peer dependencies found

├─┬ @nx/react 20.4.6
│ └─┬ @nx/module-federation 20.4.6
│   └─┬ @module-federation/node 2.6.28
│     ├── ✕ unmet peer react@^16||^17||^18: found 19.0.0
│     ├── ✕ unmet peer react-dom@^16||^17||^18: found 19.0.0
│     └─┬ @module-federation/utilities 3.1.46
│       ├── ✕ unmet peer react@"^16 || ^17 || ^18": found 19.0.0
│       └── ✕ unmet peer react-dom@"^16 || ^17 || ^18": found 19.0.0

In testing I haven't run into issues beyond the annoying warning, and having to generate and then update to 19, but most of my work is in nextjs currently.

[Aakarshak1]

Any update on React 19 support?

[Lonli-Lokli]

It is already supported

[Aakarshak1]

@Lonli-Lokli I just created a new workspace with the below configuration and it installed react v18.3.1 by default

Do I need to change anything here?

[SoftwareDesign-Solution]

@Lonli-Lokli I just created a new workspace with the below configuration and it installed react v18.3.1 by default

Do I need to change anything here?

I have the same problem and used the following workaround.

Create an empty Nx monorepo and then run the following commands before adding @nx/react to the project.

npm install react react-dom

npm install --save-dev @types/react @types/react-dom

Die Überprüfung auf React 18 oder eine andere Version habe ich an folgende Stellen gefunden

https://github.com/nrwl/nx/blob/master/packages/react/src/utils/version-utils.ts

[cheesestringer]

For anyone blocked by the @module-federation/node package this was fixed in module-federation/core#3619 and is now available in release https://github.com/module-federation/core/releases/tag/v0.11.2.

Do an npm update to consume the new versions.

[Juuldamen]

FYI, if you have the below error. While @module-federation/node peerDependencies have been updated, @module-federation/utilities has not been. It is waiting on module-federation/core#3630 to resolve this error.

npm warn Could not resolve dependency:
npm warn peerOptional react@"^16 || ^17 || ^18" from @module-federation/[email protected]

[cheesestringer]

Utilities was just a warning so it shouldn't block you but maybe my setup was simpler. Otherwise yeah wait for the next release.