Help Needed: Persistent "removeChild" Error with Google Translate on React 18.2.0.

Mike — Tue, 09 Jul 2024 12:14:32 +0000

Hello everyone,

I'm reaching out for help with a persistent issue we've been experiencing in our React application whenever users translate the page using Google Translate.

We have the following error message:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This error seems to occur consistently and is proving difficult to resolve. We've already investigated various resources, including this https://martijnhols.nl/gists/everything-about-google-translate-crashing-react on Google Translate issues with React.
Despite these efforts, the problem persists.

Example Issue in Code
We've already tried to address this issue by wrapping strings in spans or fragments using both the ternary and "And (&&)" operators in our React components. However, we don't believe this fully solves all our problems.

Here's an example how we tried to fix this issue:

JSX:
{checked && <span>checked</span>}

or

JSX:
{checked ? <>checked</> : <>not checked</>}

Sentry Issue Trace
Additionally, here is a snippet from our Sentry logs that shows where the error is being thrown in react-dom.production.min.js:

{snip} c=c.stateNode,8===a.nodeType?a.parentNode.removeChild(c):a.removeChild(c)):X.removeChild(c.stateNode));break;case 18:null!==X&&(Xj?(a=X,c=c. {snip}
Logger Output:

{ "arguments": [ { "message": "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.", "name": "NotFoundError", "stack": "Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at Ay (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:26323) at Qs (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:26029) at Ay (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27105) at da (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27642) at My (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:29288) at da (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27797) at My (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:30975) at da (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27797) at My (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27910) at da (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:27797) at My (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:29137) at U2 (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:41368) at Mc (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:40773) at ph (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:41:36158) at j (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:26:1672) at MessagePort.Ee (https://testTest123.net/assets/chunks/chunk-wXiuE3H-.js:26:2049)" } ], "logger": "console" }

Has anyone else encountered this issue, especially in applications using Google Translate? Are there known workarounds or fixes that can be implemented to prevent this error?

Any insights or suggestions on how to tackle this problem would be greatly appreciated. We are looking for a more robust solution to ensure our application remains stable and user-friendly even when translated.

Reminder: "noTranslation" is not an option for us, we need to find a proper way to work around this issue.

Thank you in advance for your help!

DEV Community: Mike

Help Needed: Persistent "removeChild" Error with Google Translate on React 18.2.0.