TypeError: useDragDropContext is not a function or its return value is not iterable at createDroppable

[akr99799]

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.

[martinpengellyphillips]

How are you calling it?

[ZanzyTHEbar]

I have the exact same error, can't seem to fix it.

[ZanzyTHEbar]

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]

Thanks for the gist. In that code I see you are calling createDroppable outside the containing context provided by DragDropProvider. 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]

I am, i wrapped my entire app with the provider. However, ill look at the docs and re-try now.

[ZanzyTHEbar]

I was able to get rid of the error, by wrapping my entire UI in the DragDropProvider as 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]

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:draggable like 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 the draggable.dragActivators usage).

[LostKobrakai]

I just ran into this as well. I'm wondering if there could be a better error message if createDroppable or createDraggable is called where it's missing context. Some random "something is not iterable" isn't really useful and basically impossible to google.