Браузерное расширение Google Translate может сломать React приложение. Это связано с тем, что, когда расширение активируется, он ищет узлы TextNode для перевода. Эти узлы заменяются на FontElement с переведенными строками внутри. Например:
<p>There are 4 lights!</p>
// После перевода:
<p><font>Er zijn 4 lampen!</font></p>
Как видно из примера, меняется DOM структура элемента. Исходный TextNode размонтируется и заменяется новым FontElement с переведенным текстом внутри.
Какие могут возникнуть проблемы при активированном Google Translate:
🔴 Значения стейта useState на странице может не обновляться. Если расширение активировано, то оно размонтирует узел и заменяет DOM элемент. Однако размонтированный DOM узел остается в памяти приложения и изменения стейта происходят в нем.
🔴 Краш приложения:
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Это может произойти из-за условного рендера строки, например:
{lightsOn && 'There are 4 lights!’}🔴 Неправильное значение в
event.target. Когда Google Translate активируется, то event.target у текста становится элемент font, а не ожидаемый элемент, в котором был изначальный текст. Кроме Google Translate приложение могут сломать и другие расширения, которые манипулируют DOM. На данный момент нет реального решения этой проблемы. Есть лишь некоторые способы обхода, но они создают дополнительные проблемы. Например, один из более-менее простых способов обхода проблемы заключается в оборачивании условного рендера строки в span.
https://martijnhols.nl/gists/everything-about-google-translate-crashing-react
