【React / エラー備忘録】The node to be removed is not a child of this node.

Reactで開発をしてて、以下のようなエラーが発生したので、その備忘録です。

エラー内容

▼ Chrome で発生したエラー:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

▼ Safari で発生したエラー:
NotFoundError: The object can not be found here.
removeChild
removeChildFromContainer ...(以下略)...

原因

「スプラッシュ画面」的なUIが動作確認用で邪魔だったので、 DevTool で直接DOMを消していました。

ですが、そのDOMを管理しているコンポーネント内にアンマウント時に消したDOMのイベントリスナーを削除する処理があったのが原因でした。

  useEffect(() => {
    // ...処理...
    return () => {
      targetElm.removeEventListener('click', handler)
    }
  }, [...]);

まとめ

DevTool で直接DOMを消すのはやめましょう。

関連記事