wwan5803/react-modal-resizable-draggable

Can't drag or resize

ValerieMichaud opened this issue · 4 comments

ValerieMichaud commented

I've followed your example and get this error when trying to drag or resize the modal:

react-dom.development.js:55 Uncaught Error: Unable to find node on an unmounted component. at invariant (react-dom.development.js:55) at findCurrentFiberUsingSlowPath (react-dom.development.js:4256) at findCurrentHostFiber (react-dom.development.js:4266) at findHostInstance (react-dom.development.js:17676) at Object.findDOMNode (react-dom.development.js:18145) at e.value (main.js:1) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react

wwan5803 commented

I have tried one on my device, works fine. I used create-react-app to create a new testing react project. According to your error message, it seems some issue of react-dom. What version of react did you use?

HZSamir commented

Sorry to drag this back out from the grave but I'm having the exact same error.
React: 17.0.1
React-dom: 17.0.1

hlolli commented

Gravedigger +1
React 17.0.1

When clicking on the modal element I get

react-dom.development.js:4091 Uncaught Invariant Violation: Unable to find node on an unmounted component.

I think this can be fixed by forwarding the ref from https://github.com/wwan5803/react-modal-resizable-draggable/blob/master/src/index.js#L17-L19

RobinLeeb commented

This is indeed closed topic. But for everybody which searching for issue with react-modal-resizable-draggable comes through google maybe here. So my scenario and the solution for it:

Setup in package.json with react-scripts v4:
"react-scripts": "^4.0.0",
"react-modal-resizable-draggable": "^0.1.4",

Check the node_modules folder from react-modal-resizable-draggable it should have an index.js file in it.

Setup after update react-scripts to v5 and for me this setup crashes the modal!
(not draggable anymore or style issues... etc.)
"react-scripts": "^5.0.0",
"react-modal-resizable-draggable": "^0.1.4",

  1. So by removing the package-lock.json first (maybe you not want to do it be sure you know what your doing)
  2. Remove node_modules folder
  3. Change react-modal-resizable-draggable in package.json to concrete version --> so modify the package.json to the setup below:
  4. npm install again
  5. Modal should work again 👍🏼

"react-scripts": "^5.0.0",
"react-modal-resizable-draggable": "0.1.4",

In cli commands:

rm -rf package-lock.json
rm -rf node_modules
Changes package.json setup to what describe above
npm install

Worked for me 👍🏼