Documentation code for Sortable with Typescript not working

[ludwignagelhus]

I am playing around with the library in a project (which uses TypeScript).

The code in the Quick start section for a simple drag-and-drop works, but with this code, nothing moves and there is no interactivity.

I am going on a few hours without being able to find out what is wrong. I would be very happy to accept some pointers :)

The code below contains two components that are to a large extent just taken stright out of the documentation for Sortable.

There are no errors in the console, and everything compiles.

import { DndContext, MouseSensor, useSensor, useSensors } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import React, { ReactNode, useState } from "react";

export const ExpSortable = () => {
  const [items, setItems] = useState(["1", "2", "3"]);
  const sensors = useSensors(
    useSensor(MouseSensor, {
      activationConstraint: {
        distance: 10
      }
    })
  );

  return (
    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
      <SortableContext items={items}>
        {items.map((id) => (
          <SortableItem key={id} id={id}>
            <p>hello from {id}</p>
          </SortableItem>
        ))}
      </SortableContext>
    </DndContext>
  );

  function handleDragEnd(event: any) {
    const { active, over } = event;
    console.log("drag end!");
    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);
        return arrayMove(items, oldIndex, newIndex);
      });
    }
  }
};

export function SortableItem(props: { children?: ReactNode; id: string }) {
  const { listeners, setNodeRef, transform, transition } = useSortable({
    id: props.id
  });

  const style = {
    padding: "5vmin",
    background: "orange",
    border: "2px solid",
    transform: CSS.Transform.toString(transform),
    transition
  } as React.CSSProperties;

  return (
    <div ref={setNodeRef} style={style} {...listeners}>
      {props.children}
    </div>
  );
}

[clauderic]

I copied your code over to CodeSandbox and everything seems to be working from what I can tell https://codesandbox.io/s/eager-dewdney-03jm9?file=/src/App.tsx

[ludwignagelhus]

Huh, how strange. The code in your link works for me too, but I am not having success in my storybook or my react-app.

[clauderic]

Try copying over the code from CodeSandbox into your project to see if it works. If not, it's likely an issue with how your local project is set up.

Double check your package-lock.json or yarn.lock file to make sure you don't have two different versions of react or @dnd-kit dependencies installed for example.

[rawcomposition]

Same issue here. I copy the code from that sandbox and it simply won't drag. No errors, nothing. A bit hard to debug. Will probably have to switch to a different drag and drop library, unfortunately.

[clauderic]

@rawcomposition Can you send me a link to your project's source code or the contents or your yarn.lock / package-lock.json file?

[rawcomposition]

Thanks for the quick response. Can't share the source code, unfortunately, but here's my yarn.lock: https://gist.github.com/rawcomposition/ba09062bad7e1dafe9479929aad20778

[clauderic]

You have two versions of @dnd-kit/core installed:

"@dnd-kit/core@^2.0.0", "@dnd-kit/core@^2.0.2":
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-2.0.2.tgz#56491b136c8ecd2f3b449ef1b88b258ff1d5022d"
  integrity sha512-7yB7z5Cpz+b4R90lw7jGfVosoC+cz9fyw+VRDRsUsG8XvRkKO97LH8S2fCzEHaTFmABt0pZkNxYiN3FDAeEmqQ==
  dependencies:
    "@dnd-kit/accessibility" "^1.0.2"
    "@dnd-kit/utilities" "^1.0.2"
    tslib "^2.0.0"

"@dnd-kit/core@^2.1.0":
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-2.1.2.tgz#08d1fede9dd4c5a0f084cc2b95a434813ee9fda7"
  integrity sha512-mJFKQUWOWq/yuD3jfPON4DuwWVGN/eS8s7GX9I5GbjG3i7Udt8I6ij1ZFinISSTTZxNVdBBcRKO4ctRecDkNKA==
  dependencies:
    "@dnd-kit/accessibility" "^2.0.0"
    "@dnd-kit/utilities" "^1.0.2"
    tslib "^2.0.0"

Try running npx yarn-deduplicate

[rawcomposition]

Thanks! npx yarn-deduplicate didn't seem to work, but uninstalling all of the @dnd-kit packages and re-installing them did the trick.

[xorander00]

Not sure if I should create another issue for this or we should re-open this one. Let me know if I should create another one.

I'm having the exact same problem as above, except uninstalling & reinstalling the dependencies didn't work. I checked the dependency versions (yarn why) and they look ok.

When I switched out useSortable for useDraggable+useDroppable, it works, which points to a potential issue in @dnd-kit/sortable? (though it could of course still be my code)

I was briefly using react-beautiful-dnd before this, and I know they don't fully support nested scrollable containers without using "position: fixed" on everything. Could that be an issue with @dnd-kit/sortable?

I also just realized & checked, version-wise, this depends on react@^16 and I'm using react^17. Would that cause an issue?

I'm going to implement using useDraggable+useDroppable for now, but would like to figure out why @dnd-kit/sortable wasn't working. I could post sample code, it's the exact code as above. I'm wondering if there's some version/implementation mismatch between @dnd-kit/core@2.1.2 vs @dnd-kit/sortable@2.0.1, or react@^16 vs react@^17, etc.

Thanks for the library, it looks good! :) Any pointers in investigating/debugging the above would be appreciated.

[xorander00]

I was just taking a quick look at the packages and both core as well as sortable depend on react^16. Using useDraggable+useDroppable from core works in my case with react^17, but sortable does not work, which might be a hint that it's not an issue with the react version.

I also noticed that sortable isn't using the latest versions of core or utilities, but I have those explicitly installed. I took a look at the changelogs for the packages, and nothing jumped out as being a breaking change (as in my case), but then again I'm not familiar with it, so it very well could be.

[rayshan]

I'm running into the same issue: useSortable doesn't work. I'm not getting any listeners. Switching to useDraggable gives me listeners. I'm also on React 17. Removing and reinstalling dependencies didn't help. This has been very frustrating to debug since it's failing silently.

[rayshan]

@xorander00 can you please sharing how you made it work with useDraggable+useDroppable?

[clauderic]

If useDraggable / useDroppable work but useSortable does not, it means that you have multiple versions of @dnd-kit/core installed in your project.

Double check your yarn.lock or package-lock.json files and remove the duplicate version of @dnd-kit/core. Alternatively, removing all @dnd-kit dependencies from your package.json file, then running yarn / npm install, and finally running yarn add @dnd-kit/core @dnd-kit/sortable or npm install @dnd-kit/core @dnd-kit/sortable should do the trick

[xorander00]

@clauderic

12:08:43 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0
❯ yarn why @dnd-kit/core
├─ @dnd-kit/modifiers@npm:1.0.5
│  └─ @dnd-kit/core@npm:2.1.2 [359e1] (via npm:^2.0.0 [359e1])
│
├─ @dnd-kit/sortable@npm:2.0.1
│  └─ @dnd-kit/core@npm:2.1.2 (via npm:^2.1.0)
│
├─ @dnd-kit/sortable@npm:2.0.1 [b02f0]
│  └─ @dnd-kit/core@npm:2.1.2 [155ab] (via npm:^2.1.0 [155ab])
│
└─ project@workspace:.
   └─ dnd-kit/core@npm:2.1.2 [b02f0] (via npm:^2.1.2 [b02f0])

12:08:47 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0
❯ yarn why @dnd-kit/sortable
└─ project@workspace:.
   └─ @dnd-kit/sortable@npm:2.0.1 [b02f0] (via npm:^2.0.1 [b02f0])

12:08:50 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0
❯ yarn why @dnd-kit/utilities
├─ @dnd-kit/core@npm:2.1.2
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
├─ @dnd-kit/core@npm:2.1.2 [155ab]
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
├─ @dnd-kit/core@npm:2.1.2 [359e1]
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
├─ @dnd-kit/core@npm:2.1.2 [b02f0]
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
├─ @dnd-kit/modifiers@npm:1.0.5
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.3)
│
├─ @dnd-kit/sortable@npm:2.0.1
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
├─ @dnd-kit/sortable@npm:2.0.1 [b02f0]
│  └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.2)
│
└─ project@workspace:.
   └─ @dnd-kit/utilities@npm:1.0.3 (via npm:^1.0.3)

12:08:58 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0

It appears to be consistent. I uninstalled & reinstalled @dnd-kit packages, but no dice. I reinstalled all packages, but no dice.

[xorander00]

I just checked yarn.lock and it has this...

"@dnd-kit/modifiers@npm:^1.0.5":
  version: 1.0.5
  resolution: "@dnd-kit/modifiers@npm:1.0.5"
  dependencies:
    "@dnd-kit/core": ^2.0.0
    "@dnd-kit/utilities": ^1.0.3
    tslib: ^2.0.0
  checksum: a6cd754dbcb391b51e6aa8ec60122a1588f356f4e0c0c6ecd3d8ae14b87cb7883299e0427456e6b1e97d0b84ed851f2d34ad3546cd1312ce2cf6375d7cb23f74
  languageName: node
  linkType: hard

"@dnd-kit/sortable@npm:^2.0.1":
  version: 2.0.1
  resolution: "@dnd-kit/sortable@npm:2.0.1"
  dependencies:
    "@dnd-kit/core": ^2.1.0
    "@dnd-kit/utilities": ^1.0.2
    tslib: ^2.0.0
  peerDependencies:
    react: ">=16.8.0"
  checksum: f8ef440df125896d9a5c977e236be3daeb61ef565b4cdf6adb0bfbb4d7624073b7548495329463e28ad28823abd56fbfe3fc44dab44b0e1a783b226f23969fed
  languageName: node
  linkType: hard

I just looked at dependencies for those packages. I would think that semver would resolve to 2.1.2 for all of those packages, but maybe not? Would updating the dependencies for @dnd-kit/modifiers & @dnd-kit/sortable to ^2.1.2 solve the issue?

[xorander00]

@rayshan

I pretty much just followed the quick start guide. The basic gist is to create two components, one that wraps useDroppable and another that wraps useDraggable. Then use the components with a unique id for each instance and wrap the whole thing in DndContext. I also have DragOverlay as a sibling to my container of draggables & droppables.

I can give you my example code, but I'll have to do it later and it might just be faster to follow the quick start guide.

[clauderic]

@xorander00 can you share your code?

Also, can you share the yarn.lock value(s) for @dnd-kit/core?

[xorander00]

Sure, yarn.lock as follows...

12:54:28 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0
❯ rg '@dnd-kit/core' yarn.lock
3364:"@dnd-kit/core@npm:^2.0.0, @dnd-kit/core@npm:^2.1.0, @dnd-kit/core@npm:^2.1.2":
3366:  resolution: "@dnd-kit/core@npm:2.1.2"
3382:    "@dnd-kit/core": ^2.0.0
3393:    "@dnd-kit/core": ^2.1.0
8295:    "@dnd-kit/core": ^2.1.2

12:54:32 user@machine:~/tmp | 📦  v5.7.0  |   v15.14.0
❯

I'll have to pull the code that uses sortable later as that'll need to come from vcs history since I changed over to useDraggable+useDroppable. Off the top of my head though, it was pretty close to what's in the docs. Also, I'll add I experienced the same thing as @rayshan, listeners were missing & no DndContext events were being fired (which I guess would happen from duplicate/conflicting versions of core?).

[rayshan]

Thanks @xorander00 I'll give it a try later.

@clauderic I'm using Yarn Berry 3.0 rc1.

package.json:

    "@dnd-kit/core": "^2.1.2",
    "@dnd-kit/sortable": "^2.0.1",
    "@dnd-kit/utilities": "^1.0.3",

yarn.lock:

"@dnd-kit/core@npm:^2.1.0, @dnd-kit/core@npm:^2.1.2":
  version: 2.1.2
  resolution: "@dnd-kit/core@npm:2.1.2"
  dependencies:
    "@dnd-kit/accessibility": ^2.0.0
    "@dnd-kit/utilities": ^1.0.2
    tslib: ^2.0.0
  peerDependencies:
    react: ">=16.8.0"
    react-dom: ">=16.8.0"
  checksum: 5db70a76779f2e6bdd214ca57c1cc6a63cf9f2dfe19633aa1ca9bfa65002d8055cf50eadc2d3aa78e0328b8319ed70b5474ea6c0d14bd16d51cb62f136bee0b3
  languageName: node
  linkType: hard

Does this mean that I have 2 core versions? Yarn cache only shows 1 version:

[clauderic]

Seems fine @rayshan. Can you post the code you have? A good sanity check would be to try to replicate the issue in CodeSandbox. If you can replicate in CodeSandbox, it's probably user-error. If you can't replicate, it's likely a problem with your local setup.

[xorander00]

I should mention that I'm using berry as well. Not saying it's an issue here, but it does tend to surface dependency declaration issues if present. A couple of other dependencies I've used had to fix dependency declarations as well, though it could definitely be an issue with berry.

I'll investigate further later this week.

[rayshan]

@clauderic the duplicate versions issue seems to be happening a lot (#25 #254). ~I still haven't figured mine out with my yarn berry setup.~ Does it make sense to make core a peerDependency of sortable, instead of a regular dependency? Like how react-dom requires react as a peerDependency: https://github.com/facebook/react/blob/master/packages/react-dom/package.json#L24-L26

@xorander00 I solved the issue with Yarn 3 berry by putting this in .yarnrc.yml

  "@dnd-kit/sortable@*":
    peerDependencies:
      "@dnd-kit/core": "*"