🤮

【React / Next.js】The node to be removed is not a child of this node.

に公開
JavaScript
Next.js
React
TypeScript
tech

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

エラー内容

▼ 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を消すのはやめましょう。

PR

https://qureo.jp/

Discussion