I wanted to report a bug I discovered that might affect other users. This isn’t a support request - just letting you know about the issue so it can be addressed for the broader community.
Steps to Reproduce:
Have Google Translate “Always translate to English” enabled in Chrome
Change website language to Japanese
Error appears in console: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Expected Behavior:
Page should translate smoothly without DOM errors
Current Behavior:
Console shows node removal error
Error persists until user disables “Always translate to English” in Chrome settings
Environment:
Platform: Vercel
Browser: Google Chrome
Google Translate: Always translate to English enabled
Additional Notes:
Error occurs consistently when changing language
Issue affects any user with automatic translation enabled in Chrome
Users need to manually disable the “Always translate” feature to stop the error
Just flagging this for your awareness to help improve the platform experience for Chrome users who rely on automatic translation.
I encountered the same problem. As soon as I opened Google Translate to translate English into Chinese, the Vercel page would display “Error loading dashboard”. console: NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
This bug is not v0 strictly related, is a more subtle, intrinsic bug, built into Chrome translation mechanism.
TLDR;
If an element contains multiple rendered string variables, they become text nodes in React’s VDOM and HTML DOM. However, Google Translate doesn’t care about text nodes and wrap them inside a <font> element. When you use the google translate, since they are not text nodes anymore, synchronization between React and DOM was broken. The element content will not be updated anymore.
No solution are still implmented but only workarounds.
Please commit to the upvoting of this bug on:
