Skip to content

Commit 3e88e97

Browse files
rickhanloniirickhanlonii
authored
s/HTML/text for text hydration mismatches (#32763)
1 parent f134b39 commit 3e88e97

File tree

6 files changed

+15
-14
lines changed

6 files changed

+15
-14
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4664,7 +4664,7 @@ describe('ReactDOMFizzServer', () => {
46644664
// client-side rendering.
46654665
await clientResolve();
46664666
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.",
46684668
]);
46694669
expect(getVisibleChildren(container)).toEqual(
46704670
<div>
@@ -4712,7 +4712,7 @@ describe('ReactDOMFizzServer', () => {
47124712
},
47134713
});
47144714
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.",
47164716
]);
47174717

47184718
expect(getVisibleChildren(container)).toEqual(
@@ -10179,7 +10179,7 @@ describe('ReactDOMFizzServer', () => {
1017910179
);
1018010180
expect(recoverableErrors).toEqual([
1018110181
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.",
1018310183
),
1018410184
]);
1018510185
} else {

‎packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ describe('ReactDOMServerHydration', () => {
127127
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
128128
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
129129
[
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:
131131
132132
- A server/client branch \`if (typeof window !== 'undefined')\`.
133133
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -196,7 +196,7 @@ describe('ReactDOMServerHydration', () => {
196196
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
197197
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
198198
[
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:
200200
201201
- A server/client branch \`if (typeof window !== 'undefined')\`.
202202
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
@@ -743,7 +743,7 @@ describe('ReactDOMServerHydration', () => {
743743
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
744744
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
745745
[
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:
747747
748748
- A server/client branch \`if (typeof window !== 'undefined')\`.
749749
- 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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3897,7 +3897,7 @@ describe('ReactDOMServerPartialHydration', () => {
38973897
});
38983898
});
38993899
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.",
39013901
]);
39023902
});
39033903

@@ -3936,7 +3936,7 @@ describe('ReactDOMServerPartialHydration', () => {
39363936
);
39373937
});
39383938
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.",
39403940
]);
39413941
});
39423942
});

‎packages/react-dom/src/__tests__/ReactRenderDocument-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ describe('rendering React components at document', () => {
320320
assertLog(
321321
favorSafetyOverHydrationPerf
322322
? [
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.",
324324
]
325325
: [],
326326
);

‎packages/react-reconciler/src/ReactFiberHydrationContext.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ export const HydrationMismatchException: mixed = new Error(
308308
"userspace. If you're seeing this, it's likely a bug in React.",
309309
);
310310

311-
function throwOnHydrationMismatch(fiber: Fiber) {
311+
function throwOnHydrationMismatch(fiber: Fiber, fromText: boolean = false) {
312312
let diff = '';
313313
if (__DEV__) {
314314
// Consume the diff root for this mismatch.
@@ -320,7 +320,8 @@ function throwOnHydrationMismatch(fiber: Fiber) {
320320
}
321321
}
322322
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+
` +
324325
'\n' +
325326
"- A server/client branch `if (typeof window !== 'undefined')`.\n" +
326327
"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
@@ -481,7 +482,7 @@ function prepareToHydrateHostInstance(
481482
fiber,
482483
);
483484
if (!didHydrate && favorSafetyOverHydrationPerf) {
484-
throwOnHydrationMismatch(fiber);
485+
throwOnHydrationMismatch(fiber, true);
485486
}
486487
}
487488

@@ -547,7 +548,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): void {
547548
parentProps,
548549
);
549550
if (!didHydrate && favorSafetyOverHydrationPerf) {
550-
throwOnHydrationMismatch(fiber);
551+
throwOnHydrationMismatch(fiber, true);
551552
}
552553
}
553554

‎scripts/error-codes/codes.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@
403403
"415": "Error parsing the data. It's probably an error code or network corruption.",
404404
"416": "This environment don't support binary chunks.",
405405
"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",
407407
"419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
408408
"420": "ServerContext: %s already defined",
409409
"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.",

0 commit comments

Comments
 (0)