Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-sortable-tree not working on react 17.0.1

Tags:

reactjs

I'm using the example of react-sortable-tree but it's not working on react 17.0.1.

When I'm using react 16.14.0, it has no error and working fine.

List of Errors:

  • Unable to find node on an unmounted component. at findHostInstanceWithWarning
  • Uncaught TypeError: this.clearMonitorSubscription is not a function at ScrollingComponent.componentWillUnmount
  • The above error occurred in the <Scrolling(List)> component:
import React from 'react'
import 'react-sortable-tree/style.css'
import SortableTree from 'react-sortable-tree'
class Areas extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] }
      ]
    }
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    )
  }
}
like image 652
Ali Taee Avatar asked Jul 18 '26 08:07

Ali Taee


1 Answers

For me setting isVirtualized property of SortableTree component to false as a temporary solution worked out (link). Warning: it disables auto-scrolling while dragging, and scrolling to the searchFocusOffset.

Also there is a solution using patch-package https://github.com/frontend-collective/react-sortable-tree/issues/821#issuecomment-766860082

Corresponding issue: https://github.com/frontend-collective/react-sortable-tree/issues/821

PR to watch: https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone/pull/80

like image 163
yavulan Avatar answered Jul 20 '26 01:07

yavulan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!