Add support for React 19, radix-ui/react-forms. While React 19 is still in beta it would be nice if the standard NPM install did not require --legacy-peer-deps

[derekjwilliams]

React 19 support

Current Behavior

When using React 19, e.g. "react": "^19.0.0-beta-26f2496093-20240514", in package.json running "npm install" gives this error:

"npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0 || ^17 || ^18" from [email protected]"

This is when using the latest: "@radix-ui/react-form": "^0.0.4-rc.6"

To overcome this error: "npm install --legacy-peer-deps"

Expected behavior

run "npm install" without error

Reproducible example

Package.json

{ "private": true, "scripts": { "clean": "rimraf .next", "predev": "npm run clean", "prebuild": "npm run clean", "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@babel/runtime": "^7.24.5", "@hookform/resolvers": "^1.0.0-rc.2", "@radix-ui/react-checkbox": "^1.0.4-rc.11", "@radix-ui/react-form": "^0.0.4-rc.6", "@radix-ui/react-icons": "^1.3.0", "@stylexjs/babel-plugin": "^0.6.1", "@stylexjs/open-props": "^0.6.1", "@stylexjs/stylex": "^0.6.1", "@supabase/ssr": "latest", "@supabase/supabase-js": "latest", "@tanstack/react-query": "^5.36.0", "@tanstack/react-query-devtools": "^5.36.0", "@vercel/speed-insights": "^1.0.10", "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517", "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517", "next": "^14.3.0-canary.70", "react": "^19.0.0-beta-26f2496093-20240514", "react-dom": "^19.0.0-beta-26f2496093-20240514", "react-hot-toast": "^2.4.1", "sharp": "^0.33.4", "typescript": "5.4.5" }, "devDependencies": { "@babel/plugin-transform-private-methods": "^7.24.1", "@playwright/test": "^1.43.1", "@stylexjs/dev-runtime": "^0.6.1", "@stylexjs/eslint-plugin": "^0.6.1", "@stylexjs/nextjs-plugin": "^0.6.1", "@tanstack/eslint-plugin-query": "^5.35.6", "@types/node": "20.12.12", "@types/react": "18.3.2", "@types/react-dom": "18.3.0", "encoding": "^0.1.13", "eslint": "^8.56.0", "eslint-config-next": "latest", "openapi-typescript": "^5.4.0", "prettier-plugin-stylex-key-sort": "^1.0.1", "rimraf": "^5.0.7" } }

Suggested solution

update dependencies to allow installing with React 19

Additional context

Low priority since there is a work around, but wanted to get this on the radar

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-form	^0.0.4-rc.6
React	n/a	^19.0.0-beta-26f2496093-20240514
Browser	n/a	n/a
Assistive tech	n/a	n/a
Node	n/a	v20.13.1
npm/yarn	npm	v10.5.2
Operating System	macos	14.5 (23F79)

[HelixHEX]

Currently running into the same as well when installing react 19

[BenAHammond]

Any timeline on this?

[vladmoroz]

This is fixed in the new release candidate versions – please let us know if you run into any other issues with React 19

[HelixHEX]

This is fixed in the new release candidate versions – please let us know if you run into any other issues with React 19

Ran into an issue with @radix-ui/react-avatar not having react 19 in peer deps

[vladmoroz]

@HelixHEX you need to use the latest RC version of that package (1.1.0-rc.6)

[BenAHammond]

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error react@"19.0.0-rc-dfd30974ab-20240613" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.8 || ^17.0 || ^18.0 || ^19.0" from @radix-ui/[email protected]
npm error node_modules/@radix-ui/react-slot
npm error @radix-ui/react-slot@"^1.1.0-rc.6" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

[vladmoroz]

@BenAHammond the version I mentioned is only for the avatar primitive. Different primitives are versioned differently.

[BenAHammond]

I pulled the versions by hand

These are the dependencies I ended up with:
"@radix-ui/react-checkbox": "^1.1.0-rc.6",
"@radix-ui/react-dialog": "^1.1.0-rc.6",
"@radix-ui/react-dropdown-menu": "^2.1.0-rc.6",
"@radix-ui/react-label": "^2.1.0-rc.6",
"@radix-ui/react-select": "^2.1.0-rc.6",
"@radix-ui/react-slot": "^1.1.0-rc.6",
"@radix-ui/react-tooltip": "^1.1.0-rc.6",

They install just fine. That error I posted is from running npm install react@rc after installing the above versions.

[BenAHammond]

Further research indicates RC versions are considered "pre-release" and won't match "post-release" "^X.0" patterns.

We need to match react@"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" for the time being. I can submit a PR?

[BenAHammond]

#2952