Skip to content

Suggestion: Add one line in CRA-originated index.html that disable Chrome's automatic translation #8101

Description

@sesam

Is your proposal related to a problem?

A deployed CRA-originated app ran into crashes. The error text:

react-dom.production.min.js:4260 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This is caused by Chrome's automatic translation feature. It seems it can modify a DOM node such that React's rendering process then fails. It is probably a fairly unusual error, but tricky to diagnose.

Describe the solution you'd like

The suggestion is to add

which according to Googles support pages (and in practice) then disables the automatic translation feature, and in turn React's rendering does not crash.

Describe alternatives you've considered

It is likely that React already tries at least somewhat to handle effects of browser plugins that change the DOM under the renderer process' feet, but maybe the Chrome translation is able to hide or somehow surprise any such protections. So there might be more interesting ways to solve this.

Other alternatives is to educate all users on how to disable this translation feature.

Additional context

Only Chrome has been specifically investigated. There are likely other browsers that offer automatic translation that can cause similar issues.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions