はじめに
React18.2.0環境で react-beautiful-dndを使用していた際に、タイトルのエラーに遭遇しました。
生成AIをもってしても半日解決できず、重い腰を上げてググることにしました。
問題
ドラッグ可能な要素（droppable）が見つからないことを意味しているらしいです。
Uncaught runtime errors:
×
ERROR
Invariant failed: Cannot find droppable entry with id [taskList-ce5d9a1b-c73f-469d-afa3-2dd4eaa35f5c] at handleError (http://localhost:3000/static/js/bundle.js:47055:58) at http://localhost:3000/static/js/bundle.js:47074:7
解決方法
調べてみたところ（参考リンクの記事、非常にわかりやすいのでお急ぎの方はどうぞ）、不具合の原因が2点ありました。
- Reactのバージョン18以上であること（例えば、React 17.0.2であれば互換性があります。）
- ReactがStrictModeで動いていること
React 18ではStrictModeの挙動が変更され、コンポーネントが開発モードで2回マウントされるようになりました。これがreact-beautiful-dndの内部状態管理と競合することで問題が発生しています。
1の場合はpackage.jsonの"dependencies"を書き換えてバージョンを落としてインストールしなおしで改善できるそうです。
しかし、適切なバージョンがわからなかったため、今回は2を採用しました。
index.jsのタグをコメントアウトします。
// 元のindex.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
//修正後のindex.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
おわりに
エラーも出ず、問題なく動作させることが出来ました。
ツールに頼りがちな開発環境でも、エラー解決には実際の事例と解決策の共有が不可欠だと実感しました。
また、react-beautiful-dndの代わりに@hello-pangea/dndというフォークライブラリを使用する方法もあるそうなので、またの機会に触れてみたいと思います。