reactjsgoogle-chromedom

Why do I get a DOMException when I use the auto-translate feature in Chrome?


I've been working with react-app. and I make a register-form but I'm having trouble solving the problem. The problem is If you input text in the username input field with the Chrome Korean automatic translation function turned on, 'DOMException' is thrown, but I don't understand it well. Because if you don't auto-translate, It works fine with no problems. Does anyone know of a solution for this?

below is error-message that bothers me.

react-dom.development.js:22738 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Thanks


Solution

  • Sometimes it happens when users use Google Translate, it mutates text nodes, and React breaks on the next render. More info and how to fix it: https://github.com/facebook/react/issues/11538#issuecomment-390386520

    You can also add the next properties to the HTML tag to disable Google Translate and fix this problem:

    If you have any other solution please respond.