s/HTML/text for text hydration mismatches (#32763)
Ricky committed
Mar 26, 2025 at 17:39 UTC
3e88e97c116c7a1535976f2d4486bbf345476443
6 files changed
+15
-14
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+3
-3
@@ -4664,7 +4664,7 @@ describe('ReactDOMFizzServer', () => {
4664
// client-side rendering.
4665
await clientResolve();
4666
await waitForAll([
4667
- "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
4667
+ "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
4668
]);
4669
expect(getVisibleChildren(container)).toEqual(
4670
<div>
@@ -4712,7 +4712,7 @@ describe('ReactDOMFizzServer', () => {
4712
},
4713
});
4714
await waitForAll([
4715
- "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
4715
+ "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
4716
]);
4717
4718
expect(getVisibleChildren(container)).toEqual(
@@ -10179,7 +10179,7 @@ describe('ReactDOMFizzServer', () => {
10179
);
10180
expect(recoverableErrors).toEqual([
10181
expect.stringContaining(
10182
- "Hydration failed because the server rendered HTML didn't match the client.",
10182
+ "Hydration failed because the server rendered text didn't match the client.",
10183
),
10184
]);
10185
} else {
packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+3
-3
@@ -127,7 +127,7 @@ describe('ReactDOMServerHydration', () => {
127
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
128
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
129
[
130
- "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:
130
+ "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:
131
132
- A server/client branch \`if (typeof window !== 'undefined')\`.
133
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -196,7 +196,7 @@ describe('ReactDOMServerHydration', () => {
196
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
197
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
198
[
199
- "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:
199
+ "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:
200
201
- A server/client branch \`if (typeof window !== 'undefined')\`.
202
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -743,7 +743,7 @@ describe('ReactDOMServerHydration', () => {
743
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
744
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
745
[
746
- "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:
746
+ "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:
747
748
- A server/client branch \`if (typeof window !== 'undefined')\`.
749
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+2
-2
@@ -3897,7 +3897,7 @@ describe('ReactDOMServerPartialHydration', () => {
3897
});
3898
});
3899
assertLog([
3900
- "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
3900
+ "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
3901
]);
3902
});
3903
@@ -3936,7 +3936,7 @@ describe('ReactDOMServerPartialHydration', () => {
3936
);
3937
});
3938
assertLog([
3939
- "onRecoverableError: Hydration failed because the server rendered HTML didn't match the client.",
3939
+ "onRecoverableError: Hydration failed because the server rendered text didn't match the client.",
3940
]);
3941
});
3942
});
packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+1
-1
@@ -320,7 +320,7 @@ describe('rendering React components at document', () => {
320
assertLog(
321
favorSafetyOverHydrationPerf
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
]
325
: [],
326
);
packages/react-reconciler/src/ReactFiberHydrationContext.js
+5
-4
@@ -308,7 +308,7 @@ export const HydrationMismatchException: mixed = new Error(
308
"userspace. If you're seeing this, it's likely a bug in React.",
309
);
310
311
-function throwOnHydrationMismatch(fiber: Fiber) {
311
+function throwOnHydrationMismatch(fiber: Fiber, fromText: boolean = false) {
312
let diff = '';
313
if (__DEV__) {
314
// Consume the diff root for this mismatch.
@@ -320,7 +320,8 @@ function throwOnHydrationMismatch(fiber: Fiber) {
320
}
321
}
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
+` +
325
'\n' +
326
"- A server/client branch `if (typeof window !== 'undefined')`.\n" +
327
"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
@@ -481,7 +482,7 @@ function prepareToHydrateHostInstance(
482
fiber,
483
);
484
if (!didHydrate && favorSafetyOverHydrationPerf) {
484
- throwOnHydrationMismatch(fiber);
485
+ throwOnHydrationMismatch(fiber, true);
486
}
487
}
488
@@ -547,7 +548,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
548
parentProps,
549
);
550
if (!didHydrate && favorSafetyOverHydrationPerf) {
550
- throwOnHydrationMismatch(fiber);
551
+ throwOnHydrationMismatch(fiber, true);
552
}
553
}
554
scripts/error-codes/codes.json
+1
-1
@@ -403,7 +403,7 @@
403
"415": "Error parsing the data. It's probably an error code or network corruption.",
404
"416": "This environment don't support binary chunks.",
405
"417": "React currently only supports piping to one writable stream.",
406
- "418": "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\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- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
406
+ "418": "Hydration failed because the server rendered %s 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\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- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
407
"419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
408
"420": "ServerContext: %s already defined",
409
"421": "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.",