はじめに

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というフォークライブラリを使用する方法もあるそうなので、またの機会に触れてみたいと思います。

参考