thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
505 stars 35 forks source link

Uncaught TypeError: useDragDropContext is not a function or its return value is not iterable at createPointerSensor #78

Closed jullury closed 1 year ago

jullury commented 1 year ago
image

I just copied the example Board from the web site, but using typescript my dependencies are: "@thisbeyond/solid-dnd": "^0.7.3", "solid-js": "~1.6.9",

floinay commented 1 year ago

Same error

martinpengellyphillips commented 1 year ago

This is usually due to vite/solid issue. Check out #67 and #53 to see if that helps.

jullury commented 1 year ago

So there is no solution if i want to use the latest version of solid and solid-dnd? Because I am using a monorepo that all use the latest version of solid Can you tell me which version of solidjs work with which version of solid-dnd

martinpengellyphillips commented 1 year ago

solid-dnd works with solidjs 1.5 and greater (as per the package.json declaration). The issue you are experiencing is likely more due to your build / dev / vite setup than incompatibility between solid-dnd and solidjs. For example, the https://solid-dnd.com website source is here and you can see it using the latest solidjs 1.6 without issue.

Have you tried the suggested fix in the issues I referenced?

jullury commented 1 year ago

Tomorrow, i'll try to create an empty project to see if the example in the works with typescript and the fix showed above. I tried adding the optimise option but it lead me to another error unrelated with my topic

jullury commented 1 year ago

@martinpengellyphillips this is my vite.config.js

import { defineConfig } from 'vite' import solidPlugin from 'vite-plugin-solid'

export default defineConfig({ plugins: [solidPlugin()], optimizeDeps: { extensions: ['jsx','tsx'], }, css: { modules: { scopeBehaviour: 'global', }, }, server: { port: 3000, }, })

jullury commented 1 year ago

and this is my package.json

{ "dependencies": { "@tailwindcss/typography": "0.*", "@thisbeyond/solid-dnd": "^0.7.3", "solid-icons": "^1.0.4", "solid-js": "^1.5", }, "devDependencies": { "@babel/core": "^7.20.12", "autoprefixer": "10.*", "babel-preset-solid": "^1.6.9", "cssnano": "5.*", "postcss": "8.*", "vite": "^4.0.4", "vite-plugin-solid": "^2.5.0" } }

jullury commented 1 year ago

i have successfully built my project using "vite build" and the drag and drop is work but when I'm using vite dev ("vite"), I have an error saying "React is undefined", that is weird is this an issue with typescript? any clue please!

jullury commented 1 year ago
image
martinpengellyphillips commented 1 year ago

I think I saw something about that on the solidjs discord channel - might be worth asking there?

Other things might be to check which version of vite-plugin-solid you have - I see a few references to a react undefined error in the issues there.

SupertigerDev commented 1 year ago

Same error. Any fix?

martinpengellyphillips commented 1 year ago

Please provide a link to the repository demonstrating the error. Otherwise there are too many variables to consider (most of which are unrelated to solid-dnd itself).

SupertigerDev commented 1 year ago

I mean, I install the package, I copy one of the examples, I get error. Idk what to say. I can set up an example in a bit

SupertigerDev commented 1 year ago

https://stackblitz.com/edit/github-sadxvo?file=src%2FApp.tsx you can open the console to see the error

SupertigerDev commented 1 year ago

seems like adding:

  optimizeDeps: {
    extensions: ['jsx'],
  },

to vue.config.ts does indeed fix this, but it's not ideal, is it? No other packages have this problem

martinpengellyphillips commented 1 year ago

Which other packages are you referring to? Perhaps we can learn something from their setup?

frnsys commented 1 year ago

I'm having the same issue--I copied over the vertical sortable example from https://solid-dnd.com/ and get the error: TypeError: null is not an object (evaluating 'useDragDropContext()'). Using:

    "solid-js": "^1.6.9",
    "@thisbeyond/solid-dnd": "^0.7.3",

    "vite": "^4.0.4",
    "vite-plugin-solid": "^2.5.0"

I can confirm that adding:

  optimizeDeps: {
    extensions: ['jsx'],
  },

to my vite.config.js also fixes it for me.

martinpengellyphillips commented 1 year ago

Looks like #80 will fix this when merged.

martinpengellyphillips commented 1 year ago

80 is now released as 0.7.4 and this issue should no longer occur (nor require the workaround).

drgarlic commented 1 year ago

Hi,

Is it possible that there was a regression ?

I also have the issue with everything up to date, while trying the vertical example

Screenshot 2023-06-20 at 14 01 32

martinpengellyphillips commented 1 year ago

I wonder if this is a recent solidjs update causing it?

drgarlic commented 1 year ago

@martinpengellyphillips Mmmh just tried the example with a new Solid template with everything up to date and there is no issue. Everything seems to work as intended.

I'll have to dig deeper to find the problem.

I'll post here if it's from solid-dnd

drgarlic commented 1 year ago

I was refactoring and the error was because I forgot to re-add the parent component from the example, my bad !