Repository navigation
TypeError: useDragDropContext is not a function or its return value is not iterable at createDroppable #105
Description
Issue description
I encountered an error when using the createDroppable function.
Full error
dev.jsx?v=25d5f95e:936 Uncaught TypeError: useDragDropContext is not a function or its return value is not iterable
at createDroppable (dev.jsx?v=25d5f95e:936:8)
at Body (day-view.tsx:70:21)
at @solid-refresh:25:42
at untrack (chunk-PUDX4ROH.js?v=25d5f95e:511:12)
at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
at runComputation (chunk-PUDX4ROH.js?v=25d5f95e:801:22)
at updateComputation (chunk-PUDX4ROH.js?v=25d5f95e:780:3)
at createMemo (chunk-PUDX4ROH.js?v=25d5f95e:273:5)
at [solid-refresh]Body (@solid-refresh:22:20)
at chunk-PUDX4ROH.js?v=25d5f95e:631:14
package.json
{
"name": "calendar",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@thisbeyond/solid-dnd": "^0.7.5",
"luxon": "^3.4.4",
"solid-js": "^1.8.7"
},
"devDependencies": {
"@types/luxon": "^3.3.7",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vite-plugin-solid": "^2.8.0"
}
}vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
export default defineConfig({
plugins: [solid()],
server: {
port: 3000,
},
build: {
target: "esnext",
},
optimizeDeps: {
extensions: ["jsx", "tsx"],
},
});Thank you for your help in addressing this issue.
Activity
martinpengellyphillips commentedon Jan 2, 2024
How are you calling it?
ZanzyTHEbar commentedon Jan 3, 2024
I have the exact same error, can't seem to fix it.
ZanzyTHEbar commentedon Jan 3, 2024
I don't mean to co-opt the OP's issue, but i have the exact same problem - so if you want me to create another issue i can.
However, here is a gist of my code.
martinpengellyphillips commentedon Jan 3, 2024
Thanks for the gist. In that code I see you are calling
createDroppableoutside the containing context provided byDragDropProvider. That's why you are getting the error.You need to ensure you are a descendant of the drag drop provider context in order to use the create draggable/droppable/sortable functions.
Note to self: maybe throw an explicit error with more explanation in this case rather than rely on default solidjs error.
ZanzyTHEbar commentedon Jan 3, 2024
I am, i wrapped my entire app with the provider. However, ill look at the docs and re-try now.
ZanzyTHEbar commentedon Jan 3, 2024
I was able to get rid of the error, by wrapping my entire UI in the
DragDropProvideras you stated. Then followed the basic dnd example - but nothing happens. Like, nothing. No dragging, no dropping.When i search my DOM for the elements, i simply get them being assigned to
true- which is clearly not what is supposed to happen.Note
I am able to get the examples to run flawlessly, just not when i implement their logic into my project.
martinpengellyphillips commentedon Jan 4, 2024
Can you share your updated code?
From your previous code you were also missing passing the handlers into your draggable element.
In other words, you need to either have
use:draggablelike in https://solid-dnd.com/?example=Basic%2520drag%2520%2526%2520drop or explicitly pass the helpers like in https://solid-dnd.com/?example=Fine%2520grained%2520%252F%2520drag%2520handle (note thedraggable.dragActivatorsusage).LostKobrakai commentedon May 7, 2024
I just ran into this as well. I'm wondering if there could be a better error message if
createDroppableorcreateDraggableis called where it's missing context. Some random "something is not iterable" isn't really useful and basically impossible to google.