Chrome traduit, React démonte tout

Ce qui se passe

Cette ligne, dans un traqueur d'erreurs, n'a pas de reproduction locale :

TEXT

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node':
The node to be removed is not a child of this node.

Le point commun des sessions touchées est la traduction de page. L'auteur a mesuré pendant un mois le comportement de Chrome, Edge, Firefox, Yandex et du widget translate_a/element.js. Les chiffres cités ici viennent de relevés du 2 septembre 2026 sur Chrome 151, rejouables avec la spec Playwright du dépôt.

Chrome ne modifie pas votre nœud de texte : il en crée un autre, l'enveloppe et détache le vôtre.

HTML

<font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Er zijn 4 lampen!</font></font>

Yandex fait de même avec <ya-tr-span> et conserve la chaîne source dans un attribut data-value.

Deux pannes, une seule visible

removeChild et insertBefore lèvent, parce que le nœud n'a plus de parent. Mais node.nodeValue = '…' ne lève rien et n'atteint personne : l'interface se fige sans qu'aucune alerte ne parte.

Deux formes de JSX exposent au problème :

JSX

<p>
  {visible && 'There are 4 lights!'}
  <span> (status)</span>
</p>

<p>There are {count} lights!</p>

Le frère compte : sans lui, React vide le parent avec textContent et rien ne casse. Le texte à trous, lui, force trois nœuds distincts — c'est celui qui gèle. Le cas est décrit depuis 2018 dans facebook/react#11538, fermé won't fix.

Le garde-fou qui empire les choses

Le correctif qui circule depuis ce ticket remplace Node.prototype.removeChild pour ignorer les nœuds orphelins. Il supprime l'exception, mais laisse l'application gelée, garde à l'écran du texte supprimé et peut afficher les deux branches d'un ternaire inversé : un plantage visible échangé contre un bug invisible.

Autres constats utiles :

Edge et Firefox réécrivent en place : vos écritures atteignent l'écran (un compteur à la seconde arrive bien à 6). Marqueur Edge : _msttexthash.
Chrome ne traduit que ce qui entre dans le viewport : sur onze signaux testés, seul scrollIntoView a déclenché la traduction (168 ms). Un nœud restauré est réparé en 210 ms s'il est visible, jamais sous la ligne de flottaison.
Restaurer puis laisser retraduire coûte 100 à 150 ms de texte en langue source par mise à jour ; écrire dans le wrapper coûte 0 ms.
Les attributs sont traduits aussi : alt, title, placeholder, aria-label, value d'un submit. Pas les data-* ni meta[name=description].
Chrome ajoute class="translated-ltr" sur <html> avant l'hydratation : côté Next.js, suppressHydrationWarning sur l'élément racine est le seul remède.

À retenir

Chercher NotFoundError + removeChild dans le traqueur : c'est la moitié bruyante d'un problème dont l'autre moitié ne remonte jamais.
Prévenir à la source avec eslint-plugin-react-google-translate, qui repère les formes de JSX à risque avant la mise en production.
translate-shield (~15 kB, zéro dépendance) écrit dans le wrapper au lieu de restaurer le nœud, et ne fait rien sur Edge et Firefox — ce qui est correct. Attention aux langues à pluriel complexe : la fusion refuse la mise à jour plutôt que de produire un accord faux, et rend alors le nombre en langue source.

Source : DEV Community