Doesn't work in `virtual` mode with React 17 ( Unable to find node on an unmounted component)

[deser]

Reporting a Bug?

The issue is already reported but I want to stress importance of fixing it: https://github.com/frontend-collective/react-sortable-tree/issues/450

[Yohlo]

Might be a problem with frontend-collective-react-dnd-scrollzone.

Checkout the change to event delegation in React 17. I can look into it some more.

[hellofantastic]

Also not virtual mode

Simple Reproduction https://codesandbox.io/s/nifty-wu-v81w4

[deser]

Any progress?

[majew7]

I very much want to explore react-sortable-tree, but my app is already on "react": "17.0.1", and so far I get a runtime error, failing with "Unable to find node on an unmounted component".

[erannave]

I very much want to explore react-sortable-tree, but my app is already on "react": "17.0.1", and so far I get a runtime error, failing with "Unable to find node on an unmounted component".

You can set "isVirtualized: false" as a workaround, but of course it also affects the behaviour of your component. That's what I am doing until it's (hopefully) fixed.

[deser]

What about https://github.com/frontend-collective/react-sortable-tree/issues/821#issuecomment-720979840 then ?:)

[xalc]

I face this too, I guess it caused by two different version of react. When run npm ls react it has two.

[Hossam-Ali-zz]

any updates?

[benatshippabo]

I face this too, I guess it caused by two different version of react. When run npm ls react it has two.

Has anyone tried using yarn resolutions to resolve this in their package.json?

{
  "resolutions": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

It fixes the crashing, but you get a new error message:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of List 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

Which probably means all that's needed is modifying this line: https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone/blob/9eead370d2dd43687143f536e5d1b14ee375a2a8/src/index.js#L117

And maybe updating the peer dependencies: https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone/blob/9eead370d2dd43687143f536e5d1b14ee375a2a8/package.json#L70

[XYjourney]

any updates? I face the same problem.

[mmvcode]

up

[Amrtesh]

up please

[timothyarmes]

For those suffering from this problem who need a solution while waiting for the pull request to be accepted, the following worked for me:

1. Ensure that you have installed frontend-collective-react-dnd-scrollzone (normally pulled in automatically as a dependency of react-sortable-tree), fixed at version 1.0.2
2. Install the excellent patch-package following the instructions described on its page (adding it as an npm post-install script).
3. Create a patches folder in the root of your project
4. In that folder, create a file called frontend-collective-react-dnd-scrollzone+1.0.2.patch, with the following content:

diff --git a/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js b/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
index f1f66d6..085b87d 100644
--- a/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
+++ b/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
@@ -178,7 +178,7 @@ function createScrollingComponent(WrappedComponent) {
         var _this2 = this;
 
         // eslint-disable-next-line react/no-find-dom-node
-        this.container = (0, _reactDom.findDOMNode)(this.wrappedInstance.current);
+        this.container = this.wrappedInstance.current;
 
         if (this.container && typeof this.container.addEventListener === 'function') {
           this.container.addEventListener('dragover', this.handleEvent);

5. run npm install. If you've correctly followed the instructions for installing patch-package then the patch will be applied.

All should now be working.

[nhat-tr]

@timothyarmes you just saved me!!! Thanks a lot. It works

[zhuxchong]

For those suffering from this problem who need a solution while waiting for the pull request to be accepted, the following worked for me:

1. Ensure that you have installed frontend-collective-react-dnd-scrollzone (normally pulled in automatically as a dependency of react-sortable-tree), fixed at version 1.0.2
2. Install the excellent patch-package following the instructions described on its page (adding it as an npm post-install script).
3. Create a patches folder in the root of your project
4. In that folder, create a file called frontend-collective-react-dnd-scrollzone+1.0.2.patch, with the following content:

diff --git a/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js b/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
index f1f66d6..085b87d 100644
--- a/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
+++ b/node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
@@ -178,7 +178,7 @@ function createScrollingComponent(WrappedComponent) {
         var _this2 = this;
 
         // eslint-disable-next-line react/no-find-dom-node
-        this.container = (0, _reactDom.findDOMNode)(this.wrappedInstance.current);
+        this.container = this.wrappedInstance.current;
 
         if (this.container && typeof this.container.addEventListener === 'function') {
           this.container.addEventListener('dragover', this.handleEvent);

1. run npm install. If you've correctly followed the instructions for installing patch-package then the patch will be applied.

All should now be working.

awesome, save me , save my life, niubi

[gcoulby]

Reducing the version of the sortable tree worked for me:

https://github.com/frontend-collective/react-sortable-tree/issues/855#issuecomment-773514609

[marqpdx]

For anyone following the awesome info regarding the patch and such noted above, you may need to run this afterward to ensure you can install react sortable tree:

npm install react-sortable-tree --force

Thank you all!

[dhavyd]

For some reason, for me it doesn't work with npm install react-sortable-tree --force, but if I delete my lock files and node_modules folder and use yarn install instead, then it works. Se my comment here https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone/pull/80#issuecomment-833544568

By the way, the patch didn't work for me unfortunately...

[arcataroger]

On react, react-dom 17.0.2 and next 11.0.0, the patch didn't work either :( It successfully applied but the same Error: Unable to find node on an unmounted component. error still occurs.

Reducing the version number also did not work, at least not if the component is set up according to the current docs' usage notes.

[arcataroger]

There's a fork on npm that makes it work again: https://www.npmjs.com/package/react-sortable-tree-patch-react-17

I couldn't get the stylesheet import working in Next.js, but that's a different problem.

[nosferatu500]

There's a fork on npm that makes it work again: https://www.npmjs.com/package/react-sortable-tree-patch-react-17

For typescript users: https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3

[nosferatu500]

Hi guys,

I fixed the issues with React 17 and created a separate package.

You can install it using

yarn add @nosferatu500/react-sortable-tree

But it does not include types for typescript. you can workaround with it:

• create decs.d.ts file and place it with tsconfig.json
• add declare module @nosferatu500/react-sortable-tree to decs.d.ts file
• in tsconfig.json change

"include": [
  "src"
  ]

to

"include": [
  "src",
  "decs.d.ts"
  ]

I am not planning any new features or any other updates (only bug fixes and only if it block my own work), but if you want to improve something, you can send me the PR to me https://github.com/nosferatu500/react-sortable-tree and I will merge it.

[jvcjunior]

up please!

[thidasapankaja]

up

[fredrodriguesof]

up

[iamursky]

[MiLaDTechS]

any updates ?

[corpulent]

Is this project active? Im evaluating a few nested list drag and drop libraries. This project looks promising, but my app is running react 17.

[arcataroger]

Is this project active? Im evaluating a few nested list drag and drop libraries. This project looks promising, but my app is running react 17.

It's probably abandoned... hasn't seen an update in months and no new releases in a year. scroll up in this thread to see react 17 workarounds or choose another project

[CiprianDraghici]

I very much want to explore react-sortable-tree, but my app is already on "react": "17.0.1", and so far I get a runtime error, failing with "Unable to find node on an unmounted component".

I added reat-dom v17 to the resolution in package.json file and it worked:

"resolutions": {
    "react-dom": "17.0.0"
 }