react-grid-layout / react-draggable

React draggable component
MIT License
8.98k stars 1.03k forks source link

Getting Warnings in new React version. #727

Open sumitdhakadjobma opened 1 year ago

sumitdhakadjobma commented 1 year ago

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 div at DraggableCore (http://localhost:3000/static/js/vendors-node_modules_react-draggable_build_cjs_cjs_js.chunk.js:1156:5) at Draggable (http://localhost:3000/static/js/vendors-node_modules_react-draggable_build_cjs_cjs_js.chunk.js:447:5) at VoiceCommand (http://localhost:3000/static/js/src_modules_Interview_FirstTheme_VoiceCommand_VoiceCommand_js.chunk.js:35:5) at Suspense at VoiceCommand ....... ....... ....... (hide content)

BrianAA commented 1 year ago

While what you say is true I also get that error. You can also just drop the strict and just use the . It cleared the problem for me.

ReactDOM.createRoot(document.getElementById("root")).render(
    <App />
);

Instead of

ReactDOM.createRoot(document.getElementById("root")).render(
   <React.Strict>
    <App />
   </React.Strict>
);
z89 commented 1 year ago

While what you say is true I also get that error. You can also just drop the strict and just use the . It cleared the problem for me.

ReactDOM.createRoot(document.getElementById("root")).render(
    <App />
);

Instead of

ReactDOM.createRoot(document.getElementById("root")).render(
   <React.Strict>
    <App />
   </React.Strict>
);

This is a bad practise since developers use StrictMode for testing. Any other solutions?

Dream4ever commented 1 year ago

@sumitdhakadjobma @z89 check out this issue: https://github.com/react-grid-layout/react-draggable/issues/693

SiddHyper commented 11 months ago

+1

designbyadrian commented 10 months ago

+1

No need to type "+1", just vote with the the icon on the original post. This way, devs can search and sort for issues.

gabrielyotoo commented 7 months ago

still an issue

jmw182 commented 5 months ago

As answered in #693, this is resolved by passing in a node ref: https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md#440-may-12-2020

yelvert commented 5 months ago

passing in a nodeRef does not always fix this issue, I think

  findDOMNode(): ?HTMLElement {
    return this.props?.nodeRef?.current ?? ReactDOM.findDOMNode(this);
  }

should become

  findDOMNode(): ?HTMLElement {
    return this.props?.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
  }

becaus the problem is that nodeRef's current value isnt always set yet when findDOMNode is called