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

[martinpengellyphillips]

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

[frnsys]

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]

Looks like #80 will fix this when merged.

[martinpengellyphillips]

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

[nym21]

Hi,

Is it possible that there was a regression ?

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

[martinpengellyphillips]

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

[nym21]

@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

[nym21]

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