Google Translate Breaks React (and other Web Apps): A DOM Showdown
2025-02-14
Google Translate, Chrome's built-in extension, manipulates the DOM in a way that breaks many modern web apps, particularly those using React. The article dives deep into how Google Translate works, replacing TextNodes with FontElements, disrupting React's Virtual DOM and causing crashes or data inconsistencies. Common errors like `NotFoundError` and `insertBefore` failures are analyzed, along with workarounds such as monkey patching and wrapping TextNodes in `` elements, but these solutions have limitations. Ultimately, the article suggests developers weigh the pros and cons, potentially disabling Google Translate or implementing their own localization to ensure app stability and user experience.