Bug: Hydration(render) Error when Using Browser Auto-Translation (e.g., Google Translate)

[alphabit-technology]

Hydration(render) Error when Using Browser Auto-Translation (e.g., Google Translate)

🐛 Bug Report

When using the browser’s built-in translation feature (e.g., Google Chrome’s "Translate this page"), React Hydration(render) sometimes fails with the following error:

Steps to Reproduce

1. Next.js Example

   • Open Next.js documentation: use-cache directive
   • Right-click on the page and select "Translate to [any language]" in Google Chrome.
   • Navigate to docs/app/api-reference/directives/use-client):.
   • Observe the console for errors.

2. Remix Example

   • Open Remix documentation: Client Data guide.
   • Right-click on the page and select "Translate to [any language]" in Google Chrome.
   • Navigate to the ComboBox component and select "dev".
   • Observe the console for errors.

3. In my own React Framework:

   • Open Loopar documentation.
   • Right-click on the page and select "Translate to [any language]" in Google Chrome.
   • Navigate to Doc/Getting Started):.
   • Observe the console for errors.

Expected Behavior

React should handle this scenario gracefully without breaking Hydration(render).

Actual Behavior

Hydration(render) breaks with a NotFoundError, likely due to the browser altering the structure of the DOM before React has finished reconciling it. This issue persists even on the official Next.js website and Remix, indicating it is not specific to any particular implementation.

Possible Solutions

• Improve hydration resilience when encountering unexpected DOM modifications.
• Provide a built-in way to detect and recover from such changes.
• Document best practices for handling hydration issues caused by external DOM modifications.

React Version

Tested on:

• React 19

Environment

• Browser: Google Chrome (latest)
• OS: Windows/macOS/Linux

Additional Notes

This issue is difficult to prevent since users can trigger automatic translation at any time. While some frameworks like Next.js and Remix catch the error internally, the root cause still persists, and it would be beneficial if React could handle it more gracefully.

Would appreciate any insights on possible solutions!

[ATacoo]

i meet it at prod env。so awful

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!