React-sortable-tree: tree does not render nodes

[mulib]

hello, im using the basic example on my Nextjs project
only thing i added is NoSsr component to prevent server side rendering (otherwise it fails)

import React from "react";
import Typography from "@material-ui/core/Typography";
import NoSsr from '@material-ui/core/NoSsr';
import SortableTree from 'react-sortable-tree';

export default class MapComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [{ id: '1', title: 'Chicken', children: [{ id: '1.1', title: 'Egg' }] }],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <Typography variant="caption">
          <NoSsr>
            <SortableTree
              treeData={this.state.treeData}
              onChange={treeData => this.setState({ treeData })}
              getNodeKey={({ node }) => node.id} />
          </NoSsr>
        </Typography>
      </div>
    );
  }
}

in browser, i can see that it renders:

• DragDropContext
  --- ReactSortableTree
  ---- Scrolling
  ----- List
  ------ Grid

it pass the treeDada props all the way down but the tree nodes doesn't getting rendered
any ideas?

[JakeFifty-Z]

Same problem, but I don't have the NoSsr.

[jonthomp]

I'm seeing this on a new project too, setting isVirtualized={false} works as a temporary solution

[JakeFifty-Z]

I'm seeing this on a new project too, setting isVirtualized={false} works as a temporary solution

Thanks for you help. Just tried this and unfortunately it didn't work for me. I'm really stumped. I stripped everything out of my component and it won't display anything. I have the exact same code as posted above, just minus the NoSsr component. So weird... I've been beating my head on my desk for a couple days with this.

[JakeFifty-Z]

Looks like my issue was related to a miss-match of of react-dnd, react-dom, react, and react-sortable-tree. I updated these packages to the latest and things are displaying again. Don't know if this is mulib's issue, but it solved mine

[MhdTlb]

same issue here. I tried to update packages as suggested by JakeFifty-Z without luck

[davidgolden]

I am also seeing this issue. I upgraded a bunch of dependencies but the main ones were webpack 1 to 4 and babel 6 to 7. I am using Sortable Tree with my own backend provider like

<DragDropContextProvider backend={this.props.isTouch ? TouchBackend : HTML5Backend}> <SortableTree /> </DragDropContextProvider>.

I isolated the issue down to something with HTML5Backend, but after upgrading react-sortable-tree, react-dnd-html5-backend, and react-dnd-touch-backend it is working again.

[noushad-pp]

I faced the same issue and as @jonthomp mentioned, setting isVirtualized={false} fixes the issue.
Also setting an explicit height to the container does fixes the issue too.

I am guessing its because react-virtualised or the whichever library used under the hood for virtual scrolling needs a container with height value rather than auto to work properly..

[Lionkka]

The solution is wrapping SortableTree up by div and add height for this div, as
@noushad-pp wrote.

<div style={{ height: 500 }}> <SortableTree .... /></div>

[jwalton]

I was running into this issue too, then realized it's because I wasn't expecting react-sortable-tree to scroll things for me, so I was mounting it inside a container with overflow: auto which was doing terrible things. :P

[teatalay]

Using reactVirtualizedListProps prop with nonsense over height is solving this issue too without any height, responsiveness, and scrolling problem. I think the virtualization library that is using in react-sortable-tree is handling this nonsense height.
reactVirtualizedListProps={{ height : 20000 }}

[niyodusengaclement]

I had the same issue as yours, I was using ES6, changing distibution and isVirtualized={false} worked for me. Just try among these imports methods and add isVirtualized={false}

import 'react-sortable-tree/style.css';

// You can import the default tree with dnd context
import SortableTree from 'react-sortable-tree';

// Or you can import the tree without the dnd context as a named export. eg
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

// Importing from cjs (default)
import SortableTree from 'react-sortable-tree/dist/index.cjs.js';
import SortableTree from 'react-sortable-tree';

// Importing from esm
import SortableTree from 'react-sortable-tree/dist/index.esm.js';

I hope it might help.
Thanks