react-sortablejs（v6.0.0）で MultiDrag が上手く読み込めなかった日に

Sortablejs すき

Sortablejs (npm) という JS のライブラリがあります。名前の通り単純に要素を Drag/Drop でソートできるようにするものです。なんと、これ単体でも、jQuery や Vue、React といったライブラリと組み合わせてもいい感じに動いてくれます。かわいい！さらに複数の要素を選択して一気に移動させたりすることもできます。No MultiDrag, No Life な諸兄もにっこりですよね。

課題：React 用の sortablejs で複数要素を選択するサンプルが動かない

複数の要素を選択して一気に移動させる機能はすごく便利で使っていきたいのですが、React 用の Sortablejs (react-sortablejs (npm)) の現時点での最新版 6.0.0 に書かれているサンプルをそのまま書いても上手く動いてくれません。
手元で動かそうとしても MultiDrag はコンストラクタではない、と怒られている React のエラー画面が出力されます。

なんでうごかないのか

意図して export から外してました

react-sortablejs の v6.0.0 に含まれている#181で export から MultiDrag と Swap が外されています。
これが原因で上述の import がそもそもできていなかったようです。そのため、import できていないコンストラクタをコンストラクタとして使おうとしたから怒られたようです。

どうして export から外したの？

変更のコミットを読む限りでは react-sortablejs ではなく Sortablejs の 1.12.x に MultiDrag に後方互換性のない変更が含まれているから、とのことです。この事情は [bug] Attempted import error: 'MultiDrag' is not exported from 'sortablejs' #179で話されており、react-sortablejs のバージョンが 5.0.5 で Sortablejs が 1.10.1 または 1.10.2 ならば問題なく動いたとのことでした。

問題が含まれる Sortablejs のバージョンについて詳細は正直わかりませんでした。正常に動いている Sortablejs 1.10.2 の次のバージョン、つまり動かなかったと目されるバージョンである 1.11.0 から 1.12.0 について GitHub からソースコードを取得することができなかったからです。npm掲載の情報によると 1.11.x および 1.12.0 は 1.10.2 にロールバックされたとのことです。

この記事を書いている時点での Sortablejs の最新版は 2021年1月8日に出た 1.13.0 となっています。しかし、1.13.0 と 1.10.2 の差分を見ると1.11.x や 1.12.0 が出た9月頃のコミットが全然なく、2020年5月24日の次のコミットが2020年12月30日と若干不自然なものになっていることからも上述のことがわかるかと思います。

どうしたら動くかな

動く組み合わせで動かす

上述の通りreact-sortablejs のバージョンが 5.0.5 で　Sortablejs が 1.10.1 または 1.10.2 ならば問題なく動いたとのことなのでこのバージョンで動かすのは一案でしょう。2020年9月27日に公開された v6.0.0 の情報を見る限りは react-sortablejs のバージョンが 5.0.5 であることによって大きな問題は起こらないように見えます。

最新版を試す

[bug] ReactSortable MultiDrag/Swap is not a constructor #143 で紹介されているように上述のサンプルコードの import 部分をちょっと修正すれば react-sortablejs v6.0.0 と Sortablejs 1.13.0 の組み合わせでも動かすことができます。
すなわち以下の修正をおこなう、ということです。

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

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

実際、私の手元ではreact-sortablejs v6.0.0 と Sortablejs 1.13.0 の組み合わせと上述の修正によって動かすことができました。1.11.x および 1.12.0 で問題を起こしていた修正がどんなものなのかわかりませんが、1.13.0 と 1.10.2 の差分を見る限りはそこについて問題を引き起こすような修正には私には見えませんでした。