Expected to find a valid target.

This is reproducible by simply using the Tree-to-tree dragging example in development mode.

How: Select a node to copy/move to the last position of another tree and drag it a little bit more under that. Reason: It is looking for a targetId which is not there. If the last valid target id is T3, this will cause the dnd to look for a targetId of T5, which is not there. DragDropMonitorImpl.js is where I debugged this. Example:

Source Code:

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
// In your own app, you would need to use import styles once in the app
// import 'react-sortable-tree/styles.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData1: [
        { title: 'node1', children: [{ title: 'node 1.1' }] },
        { title: 'node2' },
      ],
      treeData2: [{ title: 'node3' }],
      shouldCopyOnOutsideDrop: false,
    };
  }

  render() {
    // Both trees need to share this same node type in their
    // `dndType` prop
    const externalNodeType = 'yourNodeType';
    const { shouldCopyOnOutsideDrop } = this.state;
    return (
      <div>
        <div
          style={{
            height: 350,
            width: 350,
            float: 'left',
            border: 'solid black 1px',
          }}
        >
          <SortableTree
            treeData={this.state.treeData1}
            onChange={treeData1 => this.setState({ treeData1 })}
            dndType={externalNodeType}
            shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
          />
        </div>

        <div
          style={{
            height: 350,
            width: 350,
            float: 'left',
            border: 'solid black 1px',
          }}
        >
          <SortableTree
            treeData={this.state.treeData2}
            onChange={treeData2 => this.setState({ treeData2 })}
            dndType={externalNodeType}
            shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
          />
        </div>

        <div style={{ clear: 'both' }} />

        <div>
          <label htmlFor="should-copy" style={{ fontSize: '0.8rem' }}>
            Enable node copy via <b>shouldCopyOnOutsideDrop</b>:
            <input
              type="checkbox"
              id="should-copy"
              value={shouldCopyOnOutsideDrop}
              onChange={event =>
                this.setState({
                  shouldCopyOnOutsideDrop: event.target.checked,
                })
              }
            />
          </label>
        </div>
      </div>
    );
  }
}

export default App;

[sinanyaman95]

I am no longer using this library, but I had figured out that this error is only visible in development mode. No such error in production mode.

[pasieronen]

There’s an open PR #740 that should fix this.