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

[mykhaliuk]

In newly created Solid.js application from template, installing the solid-dnd dependencies and copy-paste an example I have the next error within the white page:

create-pointer-sensor.js?v=88ebfb3e:4 Uncaught TypeError: useDragDropContext is not a function
 or its return value is not iterable
    at createPointerSensor (create-pointer-sensor.js?v=88ebfb3e:4:108)
    at DragDropSensors (drag-drop-sensors.jsx:3:5)
    at dev.js:515:12
    at untrack (dev.js:421:12)
    at Object.fn (dev.js:511:37)
    at runComputation (dev.js:691:22)
    at updateComputation (dev.js:676:3)
    at devComponent (dev.js:522:3)
    at createComponent (dev.js:1222:10)
    at get children [as children] (App.tsx:156:2)

App.tsx

import { Component, For } from "solid-js";

import {
	DragDropProvider,
	DragDropSensors,
	DragOverlay,
	createDraggable,
	DragEventHandler,
} from "@thisbeyond/solid-dnd";

const Draggable = (props) => {
const draggable = createDraggable(props.id);
  return (
    <div
      use:draggable
      class="draggable absolute"
      classList={{ "opacity-25": draggable.isActiveDraggable }}
      style={{ top: 0, left: (props.id === 1 ? 0 : 125) + "px" }}
    >
      Draggable {props.id}
    </div>
  );
};

export const DragMoveExample = () => {
  let transform = { x: 0, y: 0 };

  const onDragMove: DragEventHandler = ({ overlay }) => {
    if (overlay) {
      transform = { ...overlay.transform };
    }
  };

  const onDragEnd: DragEventHandler = ({ draggable }) => {
    const node = draggable.node;
    node.style.setProperty("top", node.offsetTop + transform.y + "px");
    node.style.setProperty("left", node.offsetLeft + transform.x + "px");
  };

  return (
    <DragDropProvider onDragMove={onDragMove} onDragEnd={onDragEnd}>
      <DragDropSensors />
      <div class="min-h-15 w-full h-full relative">
        <Draggable id={1} />
        <Draggable id={2} />
      </div>
      <DragOverlay>
        {(draggable) => <div class="draggable">Draggable {draggable.id}</div>}
      </DragOverlay>
    </DragDropProvider>
  );
};

const App: Component = () => {
  return (
      <>
        <DragMoveExample />
        <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p>
    </>
  );
};

export default App;

package.json

{
  "name": "dnd",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.8.2",
    "vite": "^3.1.4",
    "vite-plugin-solid": "^2.3.9"
  },
  "dependencies": {
    "@thisbeyond/solid-dnd": "^0.7.1",
    "solid-js": "^1.5.7"
  }
}

Thank you in advance for any thought on this point.

Might be i'm doing something wrong, cause I just started to dig into solid ^^

[martinpengellyphillips]

Hmm. That's definitely unexpected. I'll try and take a look at the weekend.

[martinpengellyphillips]

Oh wait, what does your vite config look like?

[MangKong-coder]

Hello! Is this issue resolved? If yes, would like to know what happened? If no, I also need some help regarding the same issue.

[martinpengellyphillips]

I'll need an example repo of this happening in order to help more. Can you share a link to where this is occurring for you?

[membranobruno]

Hi! The same problem.

create-draggable.js?v=49d3789b:6 Uncaught (in promise) TypeError: useDragDropContext is not a function or its return value is not iterable
    at createDraggable (create-draggable.js?v=49d3789b:6:77)
    at _Hot$$Folder (Folder.jsx:8:20)
    at @solid-refresh:10:42
    at untrack (dev.js:421:12)
    at Object.fn (@solid-refresh:10:28)
    at runComputation (dev.js:691:22)
    at updateComputation (dev.js:676:3)
    at createMemo (dev.js:238:10)
    at hmrCompWrapper (@solid-refresh:7:20)
    at dev.js:515:12

[martinpengellyphillips]

Check your vite.config.ts contains the following:

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

For example:

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

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  optimizeDeps: {
    extensions: ["jsx"],
  },
});

[membranobruno]

My config:

import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"
const path = require("path")

export default defineConfig({
  plugins: [solidPlugin()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  optimizeDeps: {
    extensions: ["jsx"],
  },
})

It's doesn't help. The issue still not resolved. (

[martinpengellyphillips]

For reference, I tested by creating a new repo from the solid ts template, updated all dependencies to latest and installed solid-dnd. This worked for me 🤷‍♂️

I'll need more info to help further:

• What versions of solid, vite, vite-solid-plugin do you have?
• What does your package.json look like?
• Do you have a repo I can look at?

[membranobruno]

Perhaps, I found what’s wrong. If I import createDraggable and define Draggable component directly in App.jsx everything works. But if make component in separate file I see the error on step const draggable = createDraggable() Maybe I don't understand something fundamental in Solid

[martinpengellyphillips]

Are you using the needed .jsx (or .tsx for typescript) extension for that other file?

[membranobruno]

After a few hours of dancing it finally works ))) I made the new project and move all my components there step by step. So, I don't know what exactly was wrong but I'm sure optimizeDeps make sense, because without that option the error appears every time.

[martinpengellyphillips]

Good to hear!

Curious: do you still have that alias entry in your vite config? If not, perhaps that was causing an issue.

[membranobruno]

My vite config looks exactly like I posted before.

[mykhaliuk]

@martinpengellyphillips sorry for being out of touch.

You r right:

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

fixes this issue for me. Thank you 🙏

[kapilpipaliya]

what this code does?

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

[kapilpipaliya]

we need to delete node_modules folder and install packages again also to make it working.

[riccardoperra]

I'm not able to use it too and no solution worked for me, except for this:

I basically switch the exports map putting "solid" as last entry 😄. That's not a good solution since there are no reason of why it's working in this way.

There is also reproducible example in a PR for my project where I'm trying to update all dependencies (both solid and solid-dnd)
https://codesandbox.io/p/github/riccardoperra/codeimage/build/update-dependencies?workspace=%7B%22gitSidebarPanel%22:%22PR%22,%22sidebarPanel%22:%22GIT%22%7D

EDIT: I noticed that the 0.7.2 pkg has "0.7.1" version at package.json. Could this be a bad module resolution with pnpm and vite 3? 🤔

[bioshazard]

@martinpengellyphillips , I ran into this issue an was able to drill down to see that useDragDropContext from dev.jsx was returning null. I was able to replicate it by commenting out the DragDropProvider and DragDropSensors from one of the Solid examples:

const DragDemo = () => {
  return (
    // <DragDropProvider>
    //   <DragDropSensors>
        <Sandbox />
    //   </DragDropSensors>
    // </DragDropProvider>
  );
};

I suspect the trouble in my actual codebase is due to putting the provider inside a conditional render or something. Going to try to start small and add to a working example until I break it, but hopefully this insight helps show what might be happening. Definitely a failure of the context not being available during the createXable function. Though likely user error.