Когда Переводчик переводит страницу, он не просто подменяет текст. Он лезет в DOM и без стеснения меняет структуру элементов. Был
<p>There are 4 lights!</p> — стало <p><font>Er zijn 4 lampen!</font></p>. Красиво? Возможно. Но React от этого в шоке: его виртуальный DOM теперь говорит одно, а реальный — другое. В результате приложение может “повиснуть” или выдать NotFoundError: Failed to execute 'removeChild'.React живёт по принципу “ничего не ломаем — всё обновляем точечно”. Но когда Переводчик самовольно выдёргивает узлы, React теряет связь с элементами и впадает в ступор. Отсюда — залипший текст, странные клики (потому что event.target вдруг указывает на <font>), и фатальные креши. Но справедливости ради, достаётся не только React — любой фреймворк, работающий с DOM, рискует оказаться в похожей ситуации.
А можно починить? Теоретически — да: оборачивайте каждый
TextNode в span, патчите методы removeChild, ловите ошибки границами и молитесь на ESLint-плагин. На практике — проще запретить перевод вообще. Грустно, но факт: единственный стабильный фикс — не давать пользователю переводить страницу. Звучит немного антигуманно, зато работоспособно.Подробнее про работу Google переводчика в связке с React читайте на Хабре.
@js_for_devs