What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If a React button or form throws Failed to execute 'insertBefore' on 'Node' after you translate a page, a translation tool may have changed the live DOM without React knowing. In one documented reproduction, replacing two adjacent conditional text children with a single conditional expression fixed the error. That is a targeted workaround—not a universal fix for every translated-page crash.
Why translation can trigger a React DOM error
React keeps an internal view of the children it rendered. Translation tools can modify text nodes in the browser’s live DOM without updating that view. When a later state change makes React insert or remove a child, the node React expects to use may no longer be where it expects—or may no longer exist.
As an Amazon Associate I earn from qualifying purchases.
The browser’s insertBefore exception means the reference node is not a child of the parent on which the insertion was attempted. A related removeChild exception means the removal target is no longer a child of that parent. These errors can occur after a user chooses “Translate to” a language and then interacts with a button, checkbox, or form.
Recommended Free Tools
Google Translate is not the only possible source of external DOM changes. A React issue discussion also mentions browser extensions and a third-party localization script. So the error wording alone does not prove that translation caused the problem.
#1 Best Overall
Try the narrow workaround for conditional text
The original React report describes two adjacent conditional text expressions. After the page was translated, changing a checkbox could trigger the exception:
{checked && "選択済み"}
{!checked && "無選択"}The reporter said this single expression fixed that example:
{checked ? "選択済み" : "無選択"}The two alternatives are mutually exclusive, and one expression gives React a single conditional text child to reconcile. This is a useful, low-impact change when your component has the same shape; it does not establish protection against arbitrary DOM changes elsewhere in the component. See the React issue and reproduction.
If the button crashes when loading starts or ends
A 2026 HeroUI report describes a button that crashes when entering or leaving a loading state. The available report does not provide verified resolution details or a controlled reproduction, so it does not establish that the conditional-text workaround above applies.
- Inspect the button’s rendered children. Check what changes between idle and loading states, including conditional text, icons, spinners, and nested elements.
- Reproduce the relevant transition after translation. Record the browser, language pair, translation method, and exact interaction that triggers the error.
- Compare the live DOM with the component’s expected output. Look for text or child nodes that have been replaced, moved, or removed before React updates the button.
- Change the smallest relevant rendering pattern and retest. Do not assume that changing the component library or React version will solve the issue without evidence from your app.
React issue #22702 corroborates reports of insertBefore and removeChild errors after Google translation, but it is marked duplicate and unconfirmed. It is not a validated root-cause analysis or a fix for the loading-state case.
Choose whether to preserve translation
| Approach | When it fits | Tradeoff |
|---|---|---|
| Use one expression for mutually exclusive text | The failing children resemble the documented conditional-text reproduction | A narrow workaround; test other dynamic child structures separately. |
| Keep translation available and reproduce the external DOM change | The product needs to remain usable in translated pages | Requires diagnosis and targeted rendering changes; the reports do not provide a universal fix. |
| Opt a specific region out of translation | A small region cannot safely be translated and the product accepts that limitation | Users lose translation for that content. A page-level prompt opt-out may not block contextual translation. |
One React discussion suggests using notranslate on a container or a Google translation opt-out. Treat either as a product decision, not the default fix for a multilingual audience: readers may rely on translation, and suppressing the automatic prompt does not necessarily prevent translation started another way. The discussion records these tradeoffs.
What the reports establish—and what they do not
The canonical React issue was opened on November 13, 2017, and documents a React 16 reproduction plus the reported conditional-expression workaround. React issue #22702, opened November 5, 2021, provides corroborating error reports but is duplicate and unconfirmed. These reports establish a plausible failure pattern, not how common it is or which current React and Chrome combinations are affected.
Chrome’s moveBefore() documentation explains that conventional insertion moves an existing element through removal and reinsertion. That is useful background on DOM behavior, but it is not a proposed fix for React reconciliation after translation. The API is available in Chrome 133, according to Chrome for Developers.
Best Value
No prevalence statistic or current version matrix is established by these reports. Verify a proposed change with the target app, browser, language pair, and state transition rather than treating the exception as proof of one cause.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
