ctrlplusb / react-sizeme

Make your React Components aware of their width and height!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

“failed to execute 'removeChild' on 'Node'” Exception

pinkynrg opened this issue · comments

I'm getting the following exception in the issue fully described here (i can add details on request):

https://stackoverflow.com/questions/51408036/failed-to-execute-removechild-on-node-exception

scroll.js:639 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

at Object.uninstall (webpack:///./node_modules/element-resize-detector/src/detection-strategy/scroll.js?:639:36)
at eval (webpack:///./node_modules/element-resize-detector/src/element-resize-detector.js?:300:31)
at utils.forEach (webpack:///./node_modules/element-resize-detector/src/collection-utils.js?:14:22)
at Object.uninstall (webpack:///./node_modules/element-resize-detector/src/element-resize-detector.js?:298:9)
at SizeAwareComponent.componentWillUnmount (webpack:///./node_modules/pnk-react-components/node_modules/react-sizeme/dist/react-sizeme.js?:371:27)
at callComponentWillUnmountWithTimer (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:9687:14)
at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:104:14)
at Object.invokeGuardedCallbackDev (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:142:16)
at invokeGuardedCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:191:29)
at safelyCallComponentWillUnmount (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:9694:7)

the package I am talking about is called { SingleValue } in pnk-react-components.

I removed the issue on StackOverflow since I found out the issue by myself.

I noticed that the problem was introduced in the newer version of react-sizeme.

I changed back from version 2.5.2 to version 2.4.1 and now everything works like a charm.

Could you create a codesandbox.io example of this? I believe the issue may be with a dependency.

commented

I changed back from version 2.5.2 to version 2.4.1 and now everything works like a charm.

I am facing the same issue. This helped. Thanks a lot

Would appreciate a codesandbox.io to reproduce the issue. 👍

I am not seeing this at all at the moment.

I will try my best to do it unfortunately I don't have much time, but since I would like to update the package to the lat major version I will try my best to find some for this. :)

I had this problem when using vegaEmbed, it seems react-sizeme gets upset when the element it's controlling that has been manipulated outside of the react lifecycle (vega, d3 etc )gets removed.

I found an easy fix was to wrap the externally manipulated div with another div, then everything worked

commented

@georgerichmond Thanks a lot! It helped me.

UPD. Sorry, but nope: the issue is still persist :(
P.s. I replaced this package to https://www.npmjs.com/package/react-measure

Tee problem seems to be happening only in production (after transpiling the code with webpack).
During development the exception doesn't occur.

I'll try to simulate the issue.

abandoned the package and moved to https://www.npmjs.com/package/react-measure too, as it was too time consuming to troubleshoot the issue and now everything is back to normal.

commented

@RubtsovAV same here Thanks for giving alternative inform

commented

@ruucm Always a pleasure

I think this was fixed with a downstream update on element-resize-detector. I've ensure deps are up to date. Reopen if necessary.

As as side note I may add a recommendation to consider alternatives to this lib under the following cases:

  • You only care about modern browsers
  • You are using React hooks

My new personal preferred method is to use ResizeDetector with hooks. Its really easy to emulate this libraries behaviour with those, and super clean.