Пост Google Translate может сломать React приложение

Google Translate может сломать React приложение Браузерное расширение 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