[bug] ReactSortable MultiDrag/Swap is not a constructor

[sriramgroot]

Describe the bug Once i install react-sortablejs node module with react app and then proceed with dependency works, I had caught with below mentioned issue

To Reproduce Steps to reproduce the behavior:

1. Run npm i react-sortablejs
2. Run you react app with npm run start
3. After importing the required dependencies
4. See error "Uncaught TypeError: _reactSortablejs.MultiDrag is not a constructor" in your console

Expected behavior Once i import the dependencies for react-sortablejs in a class component it should be working as expected

Information Below i attached the code block for your reference

import section

import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

---

After import dependency, but before starting class component

Sortable.mount(new MultiDrag(), new Swap());

---

Within render method

<ReactSortable
multiDrag // enables mutidrag
// OR
swap // enables swap
>
{qrFormat.map((item, index) => (
<div key={index}>{item}</div>
))}
</ReactSortable>

---

Browser Information browser = Chrome Version 81.0.4044.113 (Official Build) (64-bit) / Firefox Version 75.0 (64-bit)

Versions - Look in your package.json for this information: react-sortable = 2.0.11 react = ^16.10.2

Additional context This was the first i tried using react-sortablejs and it is throwing me these type of errors

Screenshot from browser console

[waynevanson]

@sriramgroot What are you using to bootstrap react with? create react app, parcel, nextjs etc.

I just tested a create react app with this and it worked fine.

If you can get a workable example to me, I can investigate. I'll accept a repo or a codesandbox.

duplicate of #141

[smatt989]

any update here? have the same issue!

[blobinabottle]

Same issue, trying to quickly reproduce the example with MultiDrag on codesandbox: https://codesandbox.io/s/nostalgic-mendeleev-0wedz?file=/src/App.js

[solenoo]

I'm receiving this error as well, when executing a test via JEST. Any fix for it ?

[carsonaaberle]

Hey everyone. I found a workaround. I have no idea why it works, but here is how I solved it:

1.) In my package.json I have these two package/version combos "sortablejs": "1.12.0", "react-sortablejs": "6.0.0"

2.) I removed the line: Sortable.mount(new MultiDrag());

3.) I kept the multiDrag={true} prop on the <ReactSortable/> component

Hope this helps some of you, MultiDrag still works by the way.

[philipaarseth]

@sriramgroot @waynevanson TLDR: import MultiDrag, Swap from 'sortablejs' not 'react-sortablejs'

The documentation for 'react-sortablejs' is either wrong or someone forgot to export MultiDrag, Swap because 'react-sortablejs' doesn't export MultiDrag, Swap.

Change

import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

To

import { ReactSortable } from "react-sortablejs";
import { Sortable, MultiDrag, Swap} from "sortablejs"

[tomasmenezes]

Still having this issue (while importing Sortable, MultiDrag from either package, working with NextJS) with "react-sortablejs": "^6.1.4", "sortablejs": "^1.15.0".

Update Working without plugin mounting in versions "react-sortablejs": "6.0.0", "sortablejs": "1.12.0", "@types/sortablejs": "1.13.0". https://github.com/SortableJS/react-sortablejs/issues/179#issuecomment-743980449

[tomasmenezes]

MultiDrag works properly in the latest versions, "react-sortablejs": "^6.1.4", "sortablejs": "^1.15.0", by importing Sortable from the complete file with all the mounted plugins in react-sortable.tsx: import Sortable from "sortablejs/modular/sortable.complete.esm.js";

[pjb6510]

I had met maximum call stack error and 'MultiDrag is not constructor' error because of server side call of nextJS. I've solved this on nextJS like this.

function mountMultiDragPlugin() {
  if (typeof window === 'undefined') {
    return;
  }

  Sortable.mount(new MultiDrag());
}

mountMultiDragPlugin();

// export const BlahBlah: FC<Props> = ({}) => {
// ...

"react-sortablejs": "6.1.1", "sortablejs": "^1.15.0"

[kght6123]

This method worked for me.

import { ReactSortable } from "react-sortablejs";
import Sortable, { MultiDrag, Swap} from "sortablejs"

function mountMultiDragPlugin() {
  if (typeof window === 'undefined') {
    return
  }
  Sortable.mount(new MultiDrag(), new Swap())
}
mountMultiDragPlugin()

Version

"react-sortablejs": "^6.1.4",
"sortablejs": "^1.15.0",
"@types/sortablejs": "^1.15.0",
"next": "12.1.6",