s/HTML/text for text hydration mismatches

rickhanlonii · rickhanlonii · commit f724e4d77780 · 2025-03-26T17:13:12.000-04:00
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4664,7 +4664,7 @@ describe('ReactDOMFizzServer', () => {
     // client-side rendering.
     await clientResolve();
     await waitForAll([
-      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
     ]);
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -4712,7 +4712,7 @@ describe('ReactDOMFizzServer', () => {
       },
     });
     await waitForAll([
-      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
     ]);
 
     expect(getVisibleChildren(container)).toEqual(
@@ -10179,7 +10179,7 @@ describe('ReactDOMFizzServer', () => {
       );
       expect(recoverableErrors).toEqual([
         expect.stringContaining(
-          "Hydration failed because the server rendered HTML didn't match the client.",
+          "Hydration failed because the server rendered text didn't match the client.",
         ),
       ]);
     } else {
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -127,7 +127,7 @@ describe('ReactDOMServerHydration', () => {
       if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+            "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
 
           - A server/client branch \`if (typeof window !== 'undefined')\`.
           - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -196,7 +196,7 @@ describe('ReactDOMServerHydration', () => {
       if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           [
-            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+            "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
 
           - A server/client branch \`if (typeof window !== 'undefined')\`.
           - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -743,7 +743,7 @@ describe('ReactDOMServerHydration', () => {
         if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
           expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             [
-              "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+              "Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
 
             - A server/client branch \`if (typeof window !== 'undefined')\`.
             - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3897,7 +3897,7 @@ describe('ReactDOMServerPartialHydration', () => {
       });
     });
     assertLog([
-      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
     ]);
   });
 
@@ -3936,7 +3936,7 @@ describe('ReactDOMServerPartialHydration', () => {
       );
     });
     assertLog([
-      "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+      "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
     ]);
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -320,7 +320,7 @@ describe('rendering React components at document', () => {
       assertLog(
         favorSafetyOverHydrationPerf
           ? [
-              "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
+              "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
             ]
           : [],
       );
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -308,7 +308,7 @@ export const HydrationMismatchException: mixed = new Error(
     "userspace. If you're seeing this, it's likely a bug in React.",
 );
 
-function throwOnHydrationMismatch(fiber: Fiber) {
+function throwOnHydrationMismatch(fiber: Fiber, fromText = false) {
   let diff = '';
   if (__DEV__) {
     // Consume the diff root for this mismatch.
@@ -320,7 +320,8 @@ function throwOnHydrationMismatch(fiber: Fiber) {
     }
   }
   const error = new Error(
-    "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n" +
+    `Hydration failed because the server rendered ${fromText ? 'text' : 'HTML'} didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+` +
       '\n' +
       "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
       "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
@@ -481,7 +482,7 @@ function prepareToHydrateHostInstance(
     fiber,
   );
   if (!didHydrate && favorSafetyOverHydrationPerf) {
-    throwOnHydrationMismatch(fiber);
+    throwOnHydrationMismatch(fiber, true);
   }
 }
 
@@ -547,7 +548,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
     parentProps,
   );
   if (!didHydrate && favorSafetyOverHydrationPerf) {
-    throwOnHydrationMismatch(fiber);
+    throwOnHydrationMismatch(fiber, true);
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -320,7 +320,7 @@ describe('rendering React components at document', () => {`
`320`	`320`	`assertLog(`
`321`	`321`	`favorSafetyOverHydrationPerf`
`322`	`322`	`? [`
`323`		`- "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",`
	`323`	`+ "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",`
`324`	`324`	`]`
`325`	`325`	`: [],`
`326`	`326`	`);`
Original file line number	Diff line number	Diff line change
`@@ -308,7 +308,7 @@ export const HydrationMismatchException: mixed = new Error(`
`308`	`308`	`"userspace. If you're seeing this, it's likely a bug in React.",`
`309`	`309`	`);`
`310`	`310`
`311`		`-function throwOnHydrationMismatch(fiber: Fiber) {`
	`311`	`+function throwOnHydrationMismatch(fiber: Fiber, fromText = false) {`
`312`	`312`	`let diff = '';`
`313`	`313`	`if (__DEV__) {`
`314`	`314`	`// Consume the diff root for this mismatch.`
`@@ -320,7 +320,8 @@ function throwOnHydrationMismatch(fiber: Fiber) {`
`320`	`320`	`}`
`321`	`321`	`}`
`322`	`322`	`const error = new Error(`
`323`		`- "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n" +`
	`323`	+ `Hydration failed because the server rendered ${fromText ? 'text' : 'HTML'} didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
	`324`	+` +
`324`	`325`	`'\n' +`
`325`	`326`	"- A server/client branch `if (typeof window !== 'undefined')`.\n" +
`326`	`327`	"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
`@@ -481,7 +482,7 @@ function prepareToHydrateHostInstance(`
`481`	`482`	`fiber,`
`482`	`483`	`);`
`483`	`484`	`if (!didHydrate && favorSafetyOverHydrationPerf) {`
`484`		`- throwOnHydrationMismatch(fiber);`
	`485`	`+ throwOnHydrationMismatch(fiber, true);`
`485`	`486`	`}`
`486`	`487`	`}`
`487`	`488`
`@@ -547,7 +548,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {`
`547`	`548`	`parentProps,`
`548`	`549`	`);`
`549`	`550`	`if (!didHydrate && favorSafetyOverHydrationPerf) {`
`550`		`- throwOnHydrationMismatch(fiber);`
	`551`	`+ throwOnHydrationMismatch(fiber, true);`
`551`	`552`	`}`
`552`	`553`	`}`
`553`	`554`