昨日紹介した「react-leaflet-draw」ライブラリを導入し、色々触っているときに「Uncaught TypeError: destroy is not a function」というエラーが発生したのでその対処方法についてご紹介。
具体的な状況としては、入力欄を追加し、そこで適当なテキストを入力しようとしたタイミングで発生しました。
入力欄の value を state で管理していたのですが、それと同時にマップの中心座標とズームレベルも state で管理しており、その状態で入力欄にテキストを入力して state が更新されると、マップで使用している state のデータも更新されるため、それが悪さをしているようでした。
色々調べてみましたが、「react-leaflet-draw」ライブラリの GitHub の Issues に解決方法が載っていました。
destroy is not a function · Issue #98 · alex3165/react-leaflet-draw · GitHub
https://github.com/alex3165/react-leaflet-draw/issues/98
こちらの記事によると、原因は react と react-dom のバージョンみたいです。
react と react-dom のバージョンを 17.0.1 に更新すれば解決するとのことでしたので、package.json を更新し、ライブラリを更新してみました。
なお、以前のバージョンは 16.2.0 でした。
ライブラリを更新後、コードは一切変更せずに再度同じ動作を行ってみると、エラーが発生することなく、意図した通りに動作しました！
コードを変えなくていいのは良かったですが…バージョンの違いで発生するエラーがあるとは…。
今後もこのようなエラーには気をつけたいです。
以上、「react-leaflet-draw」ライブラリを導入したプロジェクトで「Uncaught TypeError: destroy is not a function」エラーが発生する時の対処方法についてでした。
ご参考になれば幸いです。
