【React】コンパイルして実行環境で稼働させたら、Failed to execute ‘removeChild’ on ‘Node’
目次
【React】コンパイルして実行環境で稼働させたら、Failed to execute 'removeChild’ on 'Node’
今回使用した環境
Windows 11 25H2
※サーバは使わず、Reactをコンパイルしたものを別クライアントで稼働させてます。
事象
とある画面の登録ボタンクリック時、画面が真っ白になり、ブラウザのコンソールで以下のようなエラーが出ておりました。
Uncaught NotFoundError: Failed to execute 'removeChild’ on 'Node’: The node to be removed is not a child of this node.
at removeChild (react-dom-client.development.js:22205:1)
at runWithFiberInDEV (react-dom-client.development.js:870:1)
開発環境では発生したことなかったので焦りましたね。
原因
単刀直入にいうと、原因はブラウザのこの日本語翻訳でした。
たしかに筆者は普段この機能は使用しないので開発環境では発生しなかったわけですね。
おそらくブラウザの日本語翻訳機能が「React が管理している DOMを外部から変更してしまう」ことによって発生していたのだと思われます。
対策
public\index.htmlに「translate="no"」を付けることで翻訳機能が禁止されます。
<html translate="no">この対策で改善し、事なきを得ました。
リリースした瞬間の動作確認で画面が真っ白になったのでけっこう焦りましたね。原因がわかれば、簡単に対処できるものでした。
以上となります。
ここまでお読みいただきありがとうございました。