浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】react-leaflet-drawライブラリで「Uncaught TypeError: destroy is not a function」エラーが発生する

昨日紹介した「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

 

こちらの記事によると、原因は reactreact-dom のバージョンみたいです。
reactreact-dom のバージョンを 17.0.1 に更新すれば解決するとのことでしたので、package.json を更新し、ライブラリを更新してみました。
なお、以前のバージョンは 16.2.0 でした。

ライブラリを更新後、コードは一切変更せずに再度同じ動作を行ってみると、エラーが発生することなく、意図した通りに動作しました!
コードを変えなくていいのは良かったですが…バージョンの違いで発生するエラーがあるとは…。
今後もこのようなエラーには気をつけたいです。

 

以上、「react-leaflet-draw」ライブラリを導入したプロジェクトで「Uncaught TypeError: destroy is not a function」エラーが発生する時の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)