search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.91k stars 831 forks source link

element.ref deprecation warning in Presence component #3200

Closed idkgene closed 2 weeks ago

idkgene commented 3 weeks ago

Bug report

Current Behavior

When interacting with components using Radix UI Presence, the following warning appears:

ConsoleError: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

Expected behavior

No console warnings should appear.

Reproducible example

Repository with minimal reproduction: https://github.com/changeelog/blank-fumadocs-app

Steps to reproduce:

Clone and run the repository Go to /docs Click on search bar

Suggested solution

The warning seems to originate from the Presence component's internal handling of refs. Consider updating the ref handling logic to align with React 19's changes regarding element.ref access.

Additional context

The warning appears despite package.json indicating support for React 19 While functionality isn't affected, the warning pollutes the console

The full Error Trace is:

ConsoleError: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:41:17) at window.console.error (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/globals/intercept-console-error.js:39:56) at Object.elementRefGetterWithDeprecationWarning (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react/cjs/react.development.js:453:17) at $921a889cee6df7e8$export$99c2b779aa4e8b8b (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/https://github.com/radix-ui+react-presence@[1.0.1_@types](mailto:1.0.1_@types)+react-dom@[18.3.1_@types](mailto:18.3.1_@types)+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-presence/dist/index.mjs:33:115) at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22349:20) at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:5740:22) at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:8001:19) at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9666:18) at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16) at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14997:22) at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14827:41) at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14807:11) at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14302:13) at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15867:7) at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15731:21) at processRootScheduleInMicrotask (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15765:7) at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15883:13)

Your environment

Software Name(s) Version
Radix Package(s) - Not sure what uses radix-presence under the hood in this case, the versions should be latest
React n/a ^18.3.1
Browser Arc/Chrome Arc - latest, Chrome - 130.0.6723.71
Assistive tech n/a n/a
Node n/a v20.16.0
npm/yarn pnpm 9.7.1
Operating System Windows 10 Pro
idkgene commented 3 weeks ago

Related issue: fuma-nama/fumadocs#1004

prince-juguilon-fgi commented 3 days ago

Hi! may I ask how this issue was fixed? it is marked as completed but I don't see any resolution. Thanks!