-
Notifications
You must be signed in to change notification settings - Fork 898
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot be used in apps with external react-dnd #459
Comments
Seems to go wrong when used in combination with next.js as well |
I have tried |
I used workaround. But first:
So the workaround basically gets the 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")
}
},
}; |
I am still facing this issue...
|
@kserjey I would install the latest version 2.6.1 our website https://frontend-collective.github.io/react-sortable-tree/ uses the latest version |
@wuweiweiwu, I have already done it 🤷♀️ |
Can you try removing your node_modules and reinstalling? I am unable to reproduce your issue |
@wuweiweiwu I think you forgot to publish changes after #466 was merged |
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:
Ideas how to fix this:
import { Consumer } from "react-dnd"
.Edit:
Demo for simulation in https://github.com/mareolan/react-sortable-tree-issue-459
The text was updated successfully, but these errors were encountered: