react-sortablejs で "Uncaught TypeError: MultiDrag is not a constructor" と怒られるので sortablejs から MultiDrag を読み込んだら上手く動いた

react-sortablejs の MultiDrag と Swap のサンプルを試していたら Uncaught TypeError: MultiDrag is not a constructor と怒られた。すなわち、以下のコードである。react-sortablejs は 6.0.0 を使用。

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

// mount whatever plugins you'd like to. These are the only current options.
Sortable.mount(new MultiDrag(), new Swap());

const App = () => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable
      multiDrag // enables mutidrag
      // OR
      swap // enables swap
    >
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

同様の問題にあたった人がいたようで Issue ([bug] ReactSortable MultiDrag/Swap is not a constructor #143) が書かれている。また、そこには解決策も紹介されており、最上部の import を次のように書き換えたら上手くいったとのことであった。つまり、 MultiDrag や Swap は sortablejs から読み込むのである。

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

これは実際私の手元でも上手く動いた。