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

[jullury]

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]

Same error

[martinpengellyphillips]

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

[jullury]

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]

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]

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]

@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]

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]

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]

[martinpengellyphillips]

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]

Same error. Any fix?

[martinpengellyphillips]

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]

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]

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

[SupertigerDev]

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