Skip to content
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

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

Open
akr99799 opened this issue Dec 22, 2023 · 8 comments

Comments

@akr99799
Copy link

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
Copy link
Contributor

How are you calling it?

@ZanzyTHEbar
Copy link

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

@ZanzyTHEbar
Copy link

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
Copy link
Contributor

martinpengellyphillips commented Jan 3, 2024

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
Copy link

ZanzyTHEbar commented Jan 3, 2024

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

@ZanzyTHEbar
Copy link

ZanzyTHEbar commented Jan 3, 2024

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.

image

Note

I am able to get the examples to run flawlessly, just not when i implement their logic into my project.

@martinpengellyphillips
Copy link
Contributor

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants