Skip to content

nodeRef solution for React 19 does not work due to incorrect build output #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rhyek opened this issue Apr 27, 2025 · 1 comment
Open

Comments

@rhyek
Copy link

rhyek commented Apr 27, 2025

The recommended solution for the React 19 findDOMNode removal is to provide a DOM element reference via nodeRef. This does not work due to how react-draggable is being built.

The check being done for provided nodeRef here falls back to using ReactDOM.findDOMNode when nodeRef is an empty ref ({ current: null }), which is always the initial value for DOM refs.

The source code appears to be doing the correct thing and should not result in this behavior, but the compiled code changes the behavior:

findDOMNode() {
  var _this$props$nodeRef$c, _this$props;
  return (_this$props$nodeRef$c = (_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.nodeRef) === null || _this$props === void 0 ? void 0 : _this$props.current) !== null && _this$props$nodeRef$c !== void 0 ? _this$props$nodeRef$c : _reactDom.default.findDOMNode(this);
}

I have some tests proving this here.

Image

@rhyek
Copy link
Author

rhyek commented Apr 27, 2025

Setting an initial value works:

const nodeRef = useRef<HTMLElement>({} as any);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant