Repository navigation
Example in README throws error on useDragDropContext #67
Description
I'm trying to run the example code in the README.
import {
DragDropProvider,
DragDropSensors,
useDragDropContext,
createDraggable,
createDroppable,
} from "@thisbeyond/solid-dnd";
import { render } from 'solid-js/web'
const Draggable = (props) => {
const draggable = createDraggable(props.id);
return <div use:draggable>draggable</div>;
};
const Droppable = (props) => {
const droppable = createDroppable(props.id);
return <div use:droppable>droppable</div>;
};
const Sandbox = () => {
const [, { onDragEnd }] = useDragDropContext();
onDragEnd(({draggable, droppable}) => {
if (droppable) {
// Handle the drop. Note that solid-dnd doesn't move a draggable into a
// droppable on drop. It leaves it up to you how you want to handle the
// drop.
}
});
return (
<div>
<Draggable id="draggable-1" />
<Droppable id="droppable-1" />
</div>
);
};
const App = () => {
return (
<DragDropProvider>
<DragDropSensors>
<Sandbox />
</DragDropSensors>
</DragDropProvider>
);
};
let appRoot = document.getElementById("app")! as HTMLDivElement;
render(() => <App/>, appRoot);I'm getting the following error on Chrome:
Uncaught TypeError: useDragDropContext is not a function or its return value is not iterable
at createPointerSensor (create-pointer-sensor.js?v=65bad4a2:4:108)
at DragDropSensors (drag-drop-sensors.jsx:3:5)
at dev.js:516:12
at untrack (dev.js:421:12)
at Object.fn (dev.js:512:37)
at runComputation (dev.js:694:22)
at updateComputation (dev.js:677:3)
at devComponent (dev.js:523:3)
at createComponent (dev.js:1225:10)
at get children [as children] (main.tsx:111:22)
and on Firefox:
Uncaught TypeError: (intermediate value)() is null
createPointerSensor create-pointer-sensor.js:4
DragDropSensors drag-drop-sensors.jsx:3
c dev.js:516
untrack dev.js:421
c dev.js:512
runComputation dev.js:694
updateComputation dev.js:677
devComponent dev.js:523
createComponent dev.js:1225
get children main.tsx:111
get dev.js:1290
get children drag-drop-context.jsx:503
res dev.js:969
runComputation dev.js:694
updateComputation dev.js:677
createMemo dev.js:238
children dev.js:577
res dev.js:969
untrack dev.js:421
provider dev.js:965
runComputation dev.js:694
updateComputation dev.js:677
createRenderEffect dev.js:205
provider dev.js:965
c dev.js:516
untrack dev.js:421
c dev.js:512
runComputation dev.js:694
updateComputation dev.js:677
devComponent dev.js:523
createComponent dev.js:1225
DragDropProvider drag-drop-context.jsx:503
c dev.js:516
untrack dev.js:421
c dev.js:512
runComputation dev.js:694
updateComputation dev.js:677
devComponent dev.js:523
createComponent dev.js:1225
_Hot$$App main.tsx:110
hmrCompWrapper @solid-refresh:10
untrack dev.js:421
hmrCompWrapper @solid-refresh:10
runComputation dev.js:694
updateComputation dev.js:677
createMemo dev.js:238
hmrCompWrapper @solid-refresh:7
c dev.js:516
untrack dev.js:421
c dev.js:512
runComputation dev.js:694
updateComputation dev.js:677
devComponent dev.js:523
createComponent dev.js:1225
_cleanup main.tsx:121
render dev.js:93
updateFn dev.js:168
runUpdates dev.js:786
createRoot dev.js:176
render dev.js:91
<anonymous> main.tsx:121
Activity
gg-jj commentedon Nov 17, 2022
I had the same problem with Vite version
3.2.4andnpm run dev.To fix was to change the Vite version to
3.0.0.I checked and found that
drag-drop-context.jsxwas called twice.It seems that the
DragDropProviderexecuted in the first module initialization is tied to the firstContext.However, in the second module initialization,
useDragDropContextis called afterContextis initialized, but beforeDragDropProvideris called, souseContext()isundefinedas a result. It seems thatuseContext()isundefinedas a result.I'm thinking that perhaps esbuild or rollup in Vite is affecting this.
The same problem does not occur in bundles created with
npm run build.The package versions involved at the time of the check are as follows
martinpengellyphillips commentedon Nov 19, 2022
This is a vite<>solid issue. However, it should have been resolved at this point with those versions.
You may need to update your vite config perhaps? See #53 (comment) for details and https://github.com/thisbeyond/solid-dnd-site for reference.