fix(hydration): avoid mismatch during hydrate text with newlines in interpolation (#9232)

edison1105 · web-flow · commit 6cbdf7823b0c · 2025-11-05T17:05:50.000+08:00
close #9229
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -82,6 +82,11 @@ describe('SSR hydration', () => {
     expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
   })
 
+  test('text w/ newlines', async () => {
+    mountWithHydration('<div>1\n2\n3</div>', () => h('div', '1\r\n2\r3'))
+    expect(`Hydration text mismatch`).not.toHaveBeenWarned()
+  })
+
   test('comment', () => {
     const { vnode, container } = mountWithHydration('<!---->', () => null)
     expect(vnode.el).toBe(container.firstChild)
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -460,18 +460,22 @@ export function createHydrationFunctions(
         ) {
           clientText = clientText.slice(1)
         }
-        if (el.textContent !== clientText) {
+        const { textContent } = el
+        if (
+          textContent !== clientText &&
+          // innerHTML normalize \r\n or \r into a single \n in the DOM
+          textContent !== clientText.replace(/\r\n|\r/g, '\n')
+        ) {
           if (!isMismatchAllowed(el, MismatchTypes.TEXT)) {
             ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
               warn(
                 `Hydration text content mismatch on`,
                 el,
-                `\n  - rendered on server: ${el.textContent}` +
-                  `\n  - expected on client: ${vnode.children as string}`,
+                `\n  - rendered on server: ${textContent}` +
+                  `\n  - expected on client: ${clientText}`,
               )
             logMismatchError()
           }
-
           el.textContent = vnode.children as string
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -460,18 +460,22 @@ export function createHydrationFunctions(`
`460`	`460`	`) {`
`461`	`461`	`clientText = clientText.slice(1)`
`462`	`462`	`}`
`463`		`- if (el.textContent !== clientText) {`
	`463`	`+ const { textContent } = el`
	`464`	`+ if (`
	`465`	`+ textContent !== clientText &&`
	`466`	`+ // innerHTML normalize \r\n or \r into a single \n in the DOM`
	`467`	`+ textContent !== clientText.replace(/\r\n\|\r/g, '\n')`
	`468`	`+ ) {`
`464`	`469`	`if (!isMismatchAllowed(el, MismatchTypes.TEXT)) {`
`465`	`470`	`;(__DEV__ \|\| __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&`
`466`	`471`	`warn(`
`467`	`472`	`Hydration text content mismatch on`,
`468`	`473`	`el,`
`469`		- `\n - rendered on server: ${el.textContent}` +
`470`		- `\n - expected on client: ${vnode.children as string}`,
	`474`	+ `\n - rendered on server: ${textContent}` +
	`475`	+ `\n - expected on client: ${clientText}`,
`471`	`476`	`)`
`472`	`477`	`logMismatchError()`
`473`	`478`	`}`
`474`		`-`
`475`	`479`	`el.textContent = vnode.children as string`
`476`	`480`	`}`
`477`	`481`	`}`