Repository navigation
[bug] ReactSortable MultiDrag/Swap is not a constructor #143
Description
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:
- Run
npm i react-sortablejs - Run you react app with
npm run start - After importing the required dependencies
- 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
Activity
waynevanson commentedon Apr 23, 2020
@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
[-]ReactSortable MultiDrag/Swap is not a constructor[/-][+][bug] ReactSortable MultiDrag/Swap is not a constructor[/+]smatt989 commentedon May 20, 2020
any update here? have the same issue!
blobinabottle commentedon May 23, 2020
Same issue, trying to quickly reproduce the example with MultiDrag on codesandbox:
https://codesandbox.io/s/nostalgic-mendeleev-0wedz?file=/src/App.js
solenoo commentedon Jul 1, 2020
I'm receiving this error as well, when executing a test via JEST. Any fix for it ?
carsonaaberle commentedon Oct 28, 2020
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 component
Hope this helps some of you, MultiDrag still works by the way.
philipaarseth commentedon Mar 8, 2021
@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
To
tomasmenezes commentedon Jul 5, 2022
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".
#179 (comment)
tomasmenezes commentedon Jul 27, 2022
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 commentedon Sep 23, 2022
I had met
maximum call stack errorand'MultiDrag is not constructor' errorbecause of server side call of nextJS.I've solved this on
nextJSlike this."react-sortablejs": "6.1.1",
"sortablejs": "^1.15.0"
kght6123 commentedon Oct 25, 2022
This method worked for me.
Version