Google翻訳をオンにしたら、Hyperagentが壊れた

• URL: https://zenn.dev/ara_ai/articles/188cdd1bbfd3a7
• 日付: 2026-06-24
• Tier: Tier 3
• 要旨: Hyperagent での DOM エラー「‘removeChild’ を実行できませんでした：削除対象のノードはこのノードの子ではありません」の原因と解決記。Google翻訳をオンにしていたことが原因。Google翻訳はページテキストを翻訳する際、HTML上のテキストノードを font タグで包む処理を行う。Hyperagent は React で構築されており、React は自分が管理する DOM 構造を把握した上で操作する。Google翻訳が font でDOM を書き換えると、React の認識する構造とズレが生じ、削除しようとしたノードが見つからないエラーが発生した。解決策は Google翻訳をオフにするだけ。

詳細

React アプリと DOM 書き換え機能の競合。エラーメッセージには Hyperagent の名前は出ず、removeChild という低レベル API 呼び出しのみ記述されていた。著者は removeChild というメッセージを読んで「DOM操作に失敗した」と理解し、「自分が何か変なことをしていないか」を考えたときに Google翻訳機能に気づいた。ブラウザ拡張機能が DOM を触ると React アプリが壊れるのはよくある話で、Google翻訳以外の拡張機能でも同じ現象が起きうる。実装レベルでは Google翻訳の font ラッピング戦略と React の DOM 管理戦略が衝突し、React の仮想 DOM と実 DOM の同期ズレが生じたケース。