diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js index 83833f493d..1a8a622ccb 100644 --- a/packages/svelte/src/internal/client/dom/hydration.js +++ b/packages/svelte/src/internal/client/dom/hydration.js @@ -48,10 +48,30 @@ export function hydrate_next() { export function reset(node) { if (!hydrating) return; - // If the node has remaining siblings, something has gone wrong - if (get_next_sibling(hydrate_node) !== null) { + var next = get_next_sibling(hydrate_node); + + if (next !== null) { w.hydration_mismatch(); - throw HYDRATION_ERROR; + + // If the remaining sibling is a comment node (a Svelte hydration marker), this is a + // genuine structural mismatch between server and client rendering — bail out + if (next.nodeType === COMMENT_NODE) { + throw HYDRATION_ERROR; + } + + // Otherwise, extra non-comment siblings may have been inserted by browser tools such as + // translation extensions (e.g. Google Translate wraps text nodes in elements). + // Remove them rather than failing hydration completely. + while (next !== null && next.nodeType !== COMMENT_NODE) { + var following = get_next_sibling(next); + next.remove(); + next = following; + } + + // If there is still a remaining sibling (a comment node), something is genuinely wrong + if (next !== null) { + throw HYDRATION_ERROR; + } } hydrate_node = node; diff --git a/packages/svelte/tests/hydration/samples/google-translate-style/_config.js b/packages/svelte/tests/hydration/samples/google-translate-style/_config.js new file mode 100644 index 0000000000..e69f8e7273 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/google-translate-style/_config.js @@ -0,0 +1,12 @@ +import { test } from '../../test'; + +// Simulates Google Translate (and similar browser translation tools) wrapping +// text content in elements, which was causing hydration to fail and +// blank the page. See https://github.com/sveltejs/svelte/issues/14807 +export default test({ + props: { + name: 'world' + }, + + expect_hydration_error: true +}); diff --git a/packages/svelte/tests/hydration/samples/google-translate-style/main.svelte b/packages/svelte/tests/hydration/samples/google-translate-style/main.svelte new file mode 100644 index 0000000000..538dc970e9 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/google-translate-style/main.svelte @@ -0,0 +1,5 @@ + + +

Hello {name}!