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

Question

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

deser opened this issue 4 years ago · 31 comments

deser commented 4 years ago

Reporting a Bug?

The issue is already reported but I want to stress importance of fixing it: #450

mmvcode commented 4 years ago

up

👍2

Amrtesh commented 4 years ago

up please

👍2

thidasapankaja commented 3 years ago

up

fredrodriguesof commented 3 years ago

up

Answer 1 · 2020-10-30T18:49:39.000Z

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.

Answer 2 · 2020-11-03T08:41:58.000Z

Also not virtual mode

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

Answer 3 · 2020-11-22T10:13:25.000Z

Any progress?

Answer 4 · 2020-11-28T01:32:24.000Z

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".

Answer 5 · 2020-11-28T06:18:15.000Z

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.

Answer 6 · 2020-12-02T12:30:33.000Z

What about #821 (comment) then ?:)

Answer 7 · 2020-12-04T06:01:57.000Z

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

Answer 8 · 2021-01-06T16:10:10.000Z

any updates?

Answer 9 · 2021-01-07T22:05:45.000Z

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

Answer 10 · 2021-01-11T08:37:53.000Z

any updates? I face the same problem.

Answer 11 · 2021-01-25T14:37:46.000Z

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

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
Install the excellent patch-package following the instructions described on its page (adding it as an npm post-install script).
Create a patches folder in the root of your project
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);

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.

Answer 12 · 2021-01-29T11:21:56.000Z

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

Answer 13 · 2021-04-14T06:22:11.000Z

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

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

Install the excellent patch-package following the instructions described on its page (adding it as an npm post-install script).

Create a patches folder in the root of your project

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);
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

Answer 14 · 2021-04-24T15:01:25.000Z

Reducing the version of the sortable tree worked for me:

#855 (comment)

Answer 15 · 2021-05-08T21:08:20.000Z

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!

Answer 16 · 2021-05-09T05:15:54.000Z

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 frontend-collective/frontend-collective-react-dnd-scrollzone#80 (comment)

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

Answer 17 · 2021-06-18T16:20:52.000Z

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.

Answer 18 · 2021-06-18T17:31:40.000Z

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.

Answer 19 · 2021-06-22T02:45:21.000Z

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

Answer 20 · 2021-06-23T02:32:28.000Z

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.

Answer 21 · 2021-06-30T13:30:31.000Z

up please!

Answer 22 · 2021-08-03T03:45:24.000Z

iamursky commented 3 years ago

😄3

Answer 23 · 2021-08-09T13:47:18.000Z

any updates ?

Answer 24 · 2021-10-11T19:59:48.000Z

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.

Answer 25 · 2021-10-11T20:02:59.000Z

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

Answer 26 · 2022-04-19T20:02:41.000Z

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"
 }

Answer 27 · 2022-11-25T15:21:26.000Z

"overrides": { "react-sortable-tree": { "react-dom": "17.0.2", "react": "17.0.2" } }

This is what worked for me with npm