Accessing element.ref was removed in React 19 console error

[harshaldarak]

Using Vibe's Tooltip wrapping a custom component with React.forwardRef (or similar ref-forwarding pattern) triggers this React 19 warning: 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.

Reproduced with Tooltip from @vibe/core V4.5.16 on next@16.3.2 / react@19.x. The internal Tooltip implementation appears to read element.ref off the child (old React <19 pattern) instead of accepting ref as a plain prop, which is deprecated in React 19.

Steps to reproduce:

Render around a component that forwards a ref to a DOM node.
Observe the console error on mount/hover.

[Mahiisss]

Your diagnosis is right — this is on the library side, not yours.

React 19 made ref a regular prop. Part of that change was removing ref from the element object itself, so any code doing element.ref now hits that warning. The fix for a library is to read it from props instead:

// pre-19
const childRef = child.ref;

// 19+
const childRef = child.props.ref;

If Tooltip is reading element.ref off its child to merge refs for positioning, that access fires the warning as soon as it renders — which is why you see it on mount and hover. Nothing you change in your own component will avoid it, since the access happens inside Tooltip before your code is involved.

Two things worth checking:

Does the tooltip still position correctly? In React 19 element.ref returns undefined rather than throwing, so Tooltip may just be getting nothing back. If positioning still works, this is cosmetic noise until they patch it. If the tooltip is misplaced or doesn't appear, it's an actual break and worth flagging as such — that makes it much higher priority for them.

Is there already an issue open? Worth a search on the repo before filing, since React 19 compatibility tends to get tracked in one umbrella issue rather than per-component ones. If there isn't one, this belongs in Issues rather than Q&A — you've got a clean reproduction and the root cause identified, which is most of the work done for them.

If you need it quiet before they ship a fix, patch-package on the Tooltip's ref access is the usual stopgap. Not lovely, but it holds until the upstream fix lands.

React's own writeup of the change, if useful for the issue: https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop