console.js:273 Warning: findDOMNode is deprecated and will be removed in the next major release.

[HenrikBechmann]

This warning comes up now, and relates to "DraggableCore". This appears to be you...

Are you aware?

[theonlineaid]

yes, We also face same error

console.js:273 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at http://localhost:5173/node_modules/.vite/deps/chunk-QNSVWXN7.js?v=f5d60d48:758:49
    at Paper2 (http://localhost:5173/node_modules/.vite/deps/chunk-M4MEA2XN.js?v=f5d60d48:119:17)
    at DraggableCore (http://localhost:5173/node_modules/.vite/deps/react-draggable.js?v=f5d60d48:620:9)
    at Draggable (http://localhost:5173/node_modules/.vite/deps/react-draggable.js?v=f5d60d48:1067:9)
    at PaperComponent

React next major version don't have "FindDOMNode"

import { createRef, Component } from 'react';

class AutoselectingInput extends Component {
  inputRef = createRef(null);

  componentDidMount() {
    const input = this.inputRef.current;
    input.select()
  }

  render() {
    return (
      <input ref={this.inputRef} defaultValue="Hello" />
    );
  }
}

react-draggable should update there package !

[yidah]

Same error here:

[fdemir]

same here

[floriancargoet]

You can use the nodeRef prop documented in the README, it doesn't use findDOMNode and removes the warning.

[julianhahn]

@floriancargoet the suggested fix in the readme does not fully cover all use cases.

Or at least I struggle to make it work. Image you want to use a react component in absolute positioning and it should be centered. After a few tries I couldn't find a way to include the suggested fixes, keep it draggable and still have it absolute positioned.

Here is a codebox to see what problem I try to describe.
https://codesandbox.io/p/sandbox/react-draggable-absolute-center-problem-wtt5qg?file=%2Fsrc%2FApp.tsx%3A4%2C31

I could also open a new issue if you want me too, since my case is more specific, but in the end I came from the same origin.

[fujiokae]

I have the same issue and I have tried using nodeRef according to the sample code at https://stackoverflow.com/questions/63603902/finddomnode-is-deprecated-in-strictmode-finddomnode-was-passed-an-instance-of-d.
After updating the code using nodeRef, when I drag my component, it shakes terribly! When I use handle prop instead of nodeRef, the component can be dragged smoothly. I tested this with the latest version of Chrome, Edge and Firefox. The terrible shaking happens with all browsers.

So, if using nodeRef is the only solution, this library is not good for me and I have to find another drag & drop library.
To be fair, my component is rather very complex and it's also resizable. If the component is simple, the nodeRef workaround would work just fine.

[designoor]

@fujiokae did you find a good alternative that works well with resizable?

[fujiokae]

There is another component where I implement sortable elements with dnd-kit (https://dndkit.com/). This component is not resizable, though. But at least dnd-kit does not have the "findDOMNode is deprecated" issue. I will try dnd-kit for my draggable & resizable component later.

[ljmongo]

same error,but i fixed it by this

import React from 'react';
import { DraggableCore } from 'react-draggable';

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.draggableRef = React.createRef(); // 创建一个 ref
}

componentDidMount() {
const domNode = this.draggableRef.current; // 直接使用 ref 获取 DOM 节点
// 对 domNode 进行操作
}

render() {
return (

拖动我

{/* 将 ref 添加到元素上 */}

);
}
}