Cannot be used in apps with external react-dnd

[mareolan]

Bug

If app is using external react-dnd (from CDN), the SortableTreeWithoutDndContext does not work. It's because react-sortable-tree uses internal stuff (React Context Consumer) imported from "react-dnd/lib/DragDropContext". App wraps the root component into DragDropContext (imported from external react-dnd) because it uses several libraries which use react-dnd and when it tries to use SortableTreeWithoutDndContext, depending on app configuration 2 things might happen:

• either it won't work because "react-dnd/lib/DragDropContext" would be considered external by app and no such file is present in built react-dnd on CDNs (making it available won't work either)
• or it won't work because react-dnd/lib/DragDropContext will be bundled into the app's bundle which means that there'll be 2 copies of it in the page (one in app's bundle, one in react-dnd from CDN), effectively creating 2 different instances of React Context Consumer (only the one in app's bundle will be initialized with dragDropManager).

Ideas how to fix this:

• Don't use Consumer from react-dnd/lib/DragDropContext - glancing at the code this might not be easy as it receives dragDropManager from it and uses it a lot.
• Maybe file a feature request for react-dnd to export the Consumer as standard API so that react-sortable-tree can then use import { Consumer } from "react-dnd".
• ?

Edit:
Demo for simulation in https://github.com/mareolan/react-sortable-tree-issue-459

[jgeluk]

Seems to go wrong when used in combination with next.js as well

[slonofanya]

I have tried SortableTreeWithoutDndContext and have the same situation.
Do you have any ideas how to fix it?

[mareolan]

I used workaround. But first:

1. The reason why there's import react-dnd/lib/DragDropContext is that the tree needs dragDropManager instance received from DragDropContext.Consumer.
2. I can get the dragDropManager instance from my App, resp. from the DragDropContext wrapper of my App.

So the workaround basically gets the dragDropManager instance from my App and passes it to tree via my own context. And in webpack I create an alias for react-dnd/lib/DragDropContext so that it's remapped to my context.

Before:

const App = ...
const DndApp = DragDropContext(ReactDndHtml5Backend)(App);
ReactDOM.render(<DndApp />, ...);

After:

import { Provider } from "./ddm-context.js";
const PassThrough = props => props.children;
const Dnd = DragDropContext(ReactDndHtml5Backend)(PassThrough);
class DndApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dragDropManager: null };
    this._setDndRef = this._setDndRef.bind(this);
  }
  _setDndRef(ref) {
    if (ref) this.setState({ dragDropManager: ref.getManager() }); // get dragDropManager instance
  }
  render() {
    return (
      <Dnd ref={this._setDndRef}>
        {this.state.dragDropManager && (
          <Provider value={this.state}>
            <App />
          </Provider>
        )}
      </Dnd>
    );
  }
}
ReactDOM.render(<DndApp />, ...);

// ddm-context.js
import React from "react";

const Context = React.createContext(null);
export const Provider = Context.Provider;
export const Consumer = Context.Consumer;

// webpack.config.js
module.exports = {
  ...,
  resolve: {
    alias: {
      "react-dnd/lib/DragDropContext": path.resolve("./src/ddm-context.js")
    }
  },
};

[kserjey]

I am still facing this issue...

ERROR in ../node_modules/react-sortable-tree/dist/index.esm.js
Module not found: Error: Can't resolve 'react-dnd/lib/DragDropContext' in '/Users/kserjey/Projects/goodwix-frontend/node_modules/react-sortable-tree/dist'
 @ ../node_modules/react-sortable-tree/dist/index.esm.js 4:0-57 3317:29-37

[wuweiweiwu]

@kserjey I would install the latest version 2.6.1

our website https://frontend-collective.github.io/react-sortable-tree/ uses the latest version

[kserjey]

@wuweiweiwu, I have already done it 🤷‍♀️

[wuweiweiwu]

Can you try removing your node_modules and reinstalling? I am unable to reproduce your issue

[dolezel]

@wuweiweiwu I think you forgot to publish changes after #466 was merged