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

[payamt007]

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

[payamt007]

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!

[payamt007]

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 😄 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: frontend-collective/react-sortable-tree#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)

[payamt007]

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 frontend-collective/react-sortable-tree#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.

[gaearon]

I'm going to close because we haven't gotten reduced reproducing cases that don't include third party libraries, as we requested.

[FrominXu]

I'm going to close because we haven't gotten reduced reproducing cases that don't include third party libraries, as we requested.

I reproduce this when my dependencies packageA depend on React16, and my project depend on React17, the ReactDOM.findDOMNode is called in packageA.

myProject/package.json

"dependencies": {
  "packageA": "1.x",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
}

packageA/package.json

"dependencies": {
  "react": "^16.10.1",
   "react-dom": "^16.10.1"
}

when I replace myProject to React16, it works. so, I think there something wrong with build work.

Then, I found js in browser refer to different React/ReactDOM. then I config webpack.config.js like (webpack/webpack#6505):

  resolve: {
    extensions: ['.js', '.jsx', ".css", ".less"],
    modules: [
      path.join(__dirname, '../node_modules')
    ],
  },

It is solved.

[jestrickler]

@gaearon I don't understand closing this due to reproducing without a 3rd party library, when the issue is a react 17 project using a react 16 library. Seems like there are multiple examples of this mentioned. I have a homegrown library that I've used in a couple react 16.13.1 projects and it works fine. I just tried to pull it into a new project that is 17.0.2 and hit this error exercising the component in storybook. So far the only straightforward solution looks like downgrading the new project from react 17 to 16. I used create-react-app and would rather not mess with webpack configuration. Any other non-library specific solutions?

[MakarovAV]

I encountered this issue in the monorepo which had a single version of react package, but multiple major versions of react-dom package.
The error disappeared after I fixed the mess with react-dom duplications.
The problem has probably the same source as invalid hook call warning, and might be solved the same way.

[ammedinap93]

The same problem here. I'm trying to upgrade my project to v. 17, but I get this error while using react-simple-popover.