React: Bug: Uncaught Error: Unable to find node on an unmounted component in react 17.0.1

[payamdvpl]

Hi, I used react-sortable-tree package im my react project in component named Tree:

import React, { Component } from "react";
import axios from "axios";
import axios_config from "./axios_config";
import "react-sortable-tree/style.css";
import SortableTree, {
} from "react-sortable-tree";
class Tree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
    };
  }
  componentDidMount() {
    (async () => {
      axios_config.url = this.props.treeLink;
      axios_config.data = {};

      try {
        let result = await axios(axios_config);
        console.log("response from server gotttt...");
        console.log(result);
        if (result.data.done === true) {
          this.setState({
            treeData: result.data.tree,
            selectedNode: result.data.tree[0],
          });
          this.props.disableLoading();
        } else {
          console.log(result.err);
          this.props.disableLoading();
        }
      } catch (err) {
        console.log(err);
      }
    })();
  }
  render() {
    return (
      <SortableTree
        style={{ height: "300px" }}
        treeData={this.state.treeData}
        onChange={(treeData) => this.setState({ treeData })}
      />
    );
  }
}

when I use Tree component in my code it works pretty well in react 16.13.1, but fails and get this error is react 17.0.1:

`←→1 of 2 errors on the page
Error: Unable to find node on an unmounted component.
▶ 21 stack frames were collapsed.
(anonymous function)
src/components/utility/Tree.js:114
111 | console.log(result);
112 | if (result.data.done === true) {
113 | //console.log(result.data.tree);

114 | this.setState({
| ^ 115 | treeData: result.data.tree,
116 | selectedNode: result.data.tree[0],
117 | });
react-dom.development.js:24281 Uncaught Error: Unable to find node on an unmounted component.
at findHostInstanceWithWarning (react-dom.development.js:24281)
at findDOMNode (react-dom.development.js:24804)
at ScrollingComponent.componentDidMount (index.js:181)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at commitRoot (react-dom.development.js:22990)
at performSyncWorkOnRoot (react-dom.development.js:22329)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at Object.enqueueSetState (react-dom.development.js:12467)
at Tree.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
at Tree.js:114`

[bvaughn]

Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Screenshots or videos can also be helpful if they help provide context on how to repro the bug.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[payamdvpl]

Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Screenshots or videos can also be helpful if they help provide context on how to repro the bug.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Here is very simple code sandbox for issue:
https://codesandbox.io/s/fervent-fog-ee4nw
If you change react , react-dom package to version 17.0.1 code will encounter
"Unable to find node on an unmounted component" error

[bvaughn]

The async wrapper around setState seems unnecessary for me. Looks like the tree component still triggers the same error even if you initialize the state to have an item in it.

class Tree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [
        {
          id: 1,
          name: "test",
          parent_id: null,
          _lft: 1,
          _rgt: 2,
          children: []
        }
      ]
    };
  }

  render() {
    return (
      <SortableTree
        style={{ height: "300px" }}
        treeData={this.state.treeData}
        onChange={(treeData) => this.setState({ treeData })}
      />
    );
  }
}

Does seem to work as expected with v16 though.

Not sure it's a React bug or not, but warrants further investigation!

[payamdvpl]

The async wrapper around setState seems unnecessary for me. Looks like the tree component still triggers the same error even if you initialize the state to have an item in it.

class Tree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [
        {
          id: 1,
          name: "test",
          parent_id: null,
          _lft: 1,
          _rgt: 2,
          children: []
        }
      ]
    };
  }

  render() {
    return (
      <SortableTree
        style={{ height: "300px" }}
        treeData={this.state.treeData}
        onChange={(treeData) => this.setState({ treeData })}
      />
    );
  }
}

Does seem to work as expected with v16 though.

Not sure it's a React bug or not, but warrants further investigation!

async was wrapper for handling server data fetching that in code sandbox I simplified it, but as you mentioned I moved treeData to initial state and error again appeared! It seems that problem is related to react-dom package.

[bvaughn]

It seems that problem is related to react-dom package

Maybe :smile: Or maybe the tree component. Needs investigation :)

[hellofantastic]

@payamdvpl I submitted an issue over on react-sortable-tree, I just did a project update to react 17 and got same error. 😄
Issue: https://github.com/frontend-collective/react-sortable-tree/issues/825

[Tommos0]

Same here https://stackoverflow.com/questions/64566527/react-native-test-error-unable-to-find-node-on-an-unmounted-component/ (error is gone running react-test-renderer@16 and react@17 and react-dom@17)

[payamdvpl]

Same here https://stackoverflow.com/questions/64566527/react-native-test-error-unable-to-find-node-on-an-unmounted-component/

Error exists in react version 17, but react 16 is fine, check my code sandbox:
https://codesandbox.io/s/fervent-fog-ee4nw
Question is what causes error in version 17...

[hellofantastic]

You are going to want to follow the this issue https://github.com/frontend-collective/react-sortable-tree/issues/821 ,
I closed mine as it was a duplicate. React 17 maybe changed some event delegation that has affected a scrolling component

[gaearon]

To diagnose the issue, the most helpful thing will be to extract a CodeSandbox that doesn't use any third-party npm libraries.