1

This problem has been plaguing me for quite some time. Whenever I navigate away from a page that uses the react-beautiful-dnd package, this error throws, in both development and production environments. Full error:

Error in function remove in ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:5017

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:5017

  5015 |         var current = ref.current;
  5016 |         !current ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot unmount ref as it is not set') : invariant(false) : void 0;
> 5017 |         getHead().removeChild(current);
  5018 |         ref.current = null;
  5019 |       };
  5020 |

If it's helpful, I'm using the Gatsby framework, perhaps there is some sort of weird clobbering going on with how elements are removed by the framework vs react-beautiful-dnd.

Found a similar problem and commented in the react-beautiful-dnd repo issues:

https://github.com/atlassian/react-beautiful-dnd/pull/2285

Just wondering if anyone out there has also run into this and has a bandaid or something to temporarily resolve this until the source library can be fixed.

fullStackChris
  • 1,300
  • 1
  • 12
  • 24
  • Also found a similar issue here, the 'resolution' was to do a hacky prototype on `removeChild` which I didn't really like: https://github.com/umijs/qiankun/issues/2046 I finally ended up using `patch-package` which I guess I could create and mark as the answer as soon as I'm able and nobody has a better solution. – fullStackChris Apr 20 '23 at 09:41

0 Answers0