Remove errorHydratingContainer (#28664)
I originally added this in #21021 but I didn't mention why and I don't quite remember why. Maybe because there were no other message? However at the time the recoverable errors mechanism didn't exist. Today I believe all cases where this happens will trigger another recoverable error. Namely these two: https://github.com/facebook/react/blob/9f33f699e4f832971dc0f2047129f832655a3b6d/packages/react-reconciler/src/ReactFiberBeginWork.js#L1442-L1446 https://github.com/facebook/react/blob/9f33f699e4f832971dc0f2047129f832655a3b6d/packages/react-reconciler/src/ReactFiberBeginWork.js#L2962-L2965 Therefore this is just an extra unnecessary log.
Sebastian Markbåge committed
Mar 27, 2024 at 23:48 UTC
323b6e98a76fe6ee721f10d327a9a682334d1a97
15 files changed
+150
-370
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+18
-39
@@ -2406,19 +2406,12 @@ describe('ReactDOMFizzServer', () => {
2406
},
2407
});
2408
2409
- await expect(async () => {
2410
- // The first paint switches to client rendering due to mismatch
2411
- await waitForPaint([
2412
- 'client',
2413
- "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
2414
- 'Log recoverable error: There was an error while hydrating.',
2415
- ]);
2416
- }).toErrorDev(
2417
- [
2418
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
2419
- ],
2420
- {withoutStack: 1},
2421
- );
2409
+ // The first paint switches to client rendering due to mismatch
2410
+ await waitForPaint([
2411
+ 'client',
2412
+ "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
2413
+ 'Log recoverable error: There was an error while hydrating.',
2414
+ ]);
2415
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
2416
});
2417
@@ -2486,19 +2479,12 @@ describe('ReactDOMFizzServer', () => {
2479
});
2480
2481
// The first paint uses the client due to mismatch forcing client render
2489
- await expect(async () => {
2490
- // The first paint switches to client rendering due to mismatch
2491
- await waitForPaint([
2492
- 'client',
2493
- "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
2494
- 'Log recoverable error: There was an error while hydrating.',
2495
- ]);
2496
- }).toErrorDev(
2497
- [
2498
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content',
2499
- ],
2500
- {withoutStack: 1},
2501
- );
2482
+ // The first paint switches to client rendering due to mismatch
2483
+ await waitForPaint([
2484
+ 'client',
2485
+ "Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
2486
+ 'Log recoverable error: There was an error while hydrating.',
2487
+ ]);
2488
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
2489
});
2490
@@ -2564,16 +2550,11 @@ describe('ReactDOMFizzServer', () => {
2550
2551
// An error logged but instead of surfacing it to the UI, we switched
2552
// to client rendering.
2567
- await expect(async () => {
2568
- await waitForAll([
2569
- 'Yay!',
2570
- 'Hydration error',
2571
- 'There was an error while hydrating.',
2572
- ]);
2573
- }).toErrorDev(
2574
- 'An error occurred during hydration. The server HTML was replaced',
2575
- {withoutStack: true},
2576
- );
2553
+ await waitForAll([
2554
+ 'Yay!',
2555
+ 'Hydration error',
2556
+ 'There was an error while hydrating.',
2557
+ ]);
2558
expect(getVisibleChildren(container)).toEqual(<span>Yay!</span>);
2559
2560
// The node that's inside the boundary that errored during hydration was
@@ -6339,9 +6320,7 @@ describe('ReactDOMFizzServer', () => {
6320
errors.push(error);
6321
},
6322
});
6342
- await expect(async () => {
6343
- await waitForAll([]);
6344
- }).toErrorDev(['An error occurred during hydration'], {withoutStack: 1});
6323
+ await waitForAll([]);
6324
expect(errors.length).toEqual(2);
6325
expect(getVisibleChildren(container)).toEqual(<span />);
6326
});
packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+28
-77
@@ -249,17 +249,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
249
Scheduler.log(normalizeError(error.message));
250
},
251
});
252
- await expect(async () => {
253
- await waitForAll([
254
- "Hydration failed because the server rendered HTML didn't match the client.",
255
- 'There was an error while hydrating.',
256
- ]);
257
- }).toErrorDev(
258
- [
259
- 'An error occurred during hydration. The server HTML was replaced with client content.',
260
- ],
261
- {withoutStack: 1},
262
- );
252
+ await waitForAll([
253
+ "Hydration failed because the server rendered HTML didn't match the client.",
254
+ 'There was an error while hydrating.',
255
+ ]);
256
expect(getVisibleChildren(container)).toEqual(
257
<div>
258
<span>
@@ -337,17 +330,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
330
Scheduler.log(normalizeError(error.message));
331
},
332
});
340
- await expect(async () => {
341
- await waitForAll([
342
- "Hydration failed because the server rendered HTML didn't match the client.",
343
- 'There was an error while hydrating.',
344
- ]);
345
- }).toErrorDev(
346
- [
347
- 'An error occurred during hydration. The server HTML was replaced with client content.',
348
- ],
349
- {withoutStack: 1},
350
- );
333
+ await waitForAll([
334
+ "Hydration failed because the server rendered HTML didn't match the client.",
335
+ 'There was an error while hydrating.',
336
+ ]);
337
expect(getVisibleChildren(container)).toEqual(
338
<div>
339
<span />
@@ -384,17 +370,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
370
Scheduler.log(normalizeError(error.message));
371
},
372
});
387
- await expect(async () => {
388
- await waitForAll([
389
- "Hydration failed because the server rendered HTML didn't match the client.",
390
- 'There was an error while hydrating.',
391
- ]);
392
- }).toErrorDev(
393
- [
394
- 'An error occurred during hydration. The server HTML was replaced with client content.',
395
- ],
396
- {withoutStack: 1},
397
- );
373
+ await waitForAll([
374
+ "Hydration failed because the server rendered HTML didn't match the client.",
375
+ 'There was an error while hydrating.',
376
+ ]);
377
expect(getVisibleChildren(container)).toEqual(
378
<div>
379
<span>
@@ -434,17 +413,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
413
Scheduler.log(normalizeError(error.message));
414
},
415
});
437
- await expect(async () => {
438
- await waitForAll([
439
- "Hydration failed because the server rendered HTML didn't match the client.",
440
- 'There was an error while hydrating.',
441
- ]);
442
- }).toErrorDev(
443
- [
444
- 'An error occurred during hydration. The server HTML was replaced with client content.',
445
- ],
446
- {withoutStack: 1},
447
- );
416
+ await waitForAll([
417
+ "Hydration failed because the server rendered HTML didn't match the client.",
418
+ 'There was an error while hydrating.',
419
+ ]);
420
expect(getVisibleChildren(container)).toEqual(
421
<div>
422
<span>
@@ -482,17 +454,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
454
Scheduler.log(normalizeError(error.message));
455
},
456
});
485
- await expect(async () => {
486
- await waitForAll([
487
- "Hydration failed because the server rendered HTML didn't match the client.",
488
- 'There was an error while hydrating.',
489
- ]);
490
- }).toErrorDev(
491
- [
492
- 'An error occurred during hydration. The server HTML was replaced with client content.',
493
- ],
494
- {withoutStack: 1},
495
- );
457
+ await waitForAll([
458
+ "Hydration failed because the server rendered HTML didn't match the client.",
459
+ 'There was an error while hydrating.',
460
+ ]);
461
expect(getVisibleChildren(container)).toEqual(
462
<div>
463
<span>
@@ -604,17 +569,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
569
Scheduler.log(normalizeError(error.message));
570
},
571
});
607
- await expect(async () => {
608
- await waitForAll([
609
- "Hydration failed because the server rendered HTML didn't match the client.",
610
- 'There was an error while hydrating.',
611
- ]);
612
- }).toErrorDev(
613
- [
614
- 'An error occurred during hydration. The server HTML was replaced with client content.',
615
- ],
616
- {withoutStack: 1},
617
- );
572
+ await waitForAll([
573
+ "Hydration failed because the server rendered HTML didn't match the client.",
574
+ 'There was an error while hydrating.',
575
+ ]);
576
expect(getVisibleChildren(container)).toEqual(
577
<div>
578
<p>Client and server</p>
@@ -649,17 +607,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
607
Scheduler.log(normalizeError(error.message));
608
},
609
});
652
- await expect(async () => {
653
- await waitForAll([
654
- "Hydration failed because the server rendered HTML didn't match the client.",
655
- 'There was an error while hydrating.',
656
- ]);
657
- }).toErrorDev(
658
- [
659
- 'An error occurred during hydration. The server HTML was replaced with client content.',
660
- ],
661
- {withoutStack: 1},
662
- );
610
+ await waitForAll([
611
+ "Hydration failed because the server rendered HTML didn't match the client.",
612
+ 'There was an error while hydrating.',
613
+ ]);
614
expect(getVisibleChildren(container)).toEqual(
615
<div>
616
<p>Client and server</p>
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+2
-16
@@ -6477,14 +6477,7 @@ body {
6477
},
6478
},
6479
);
6480
- await expect(async () => {
6481
- await waitForAll([]);
6482
- }).toErrorDev(
6483
- [
6484
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
6485
- ],
6486
- {withoutStack: 1},
6487
- );
6480
+ await waitForAll([]);
6481
expect(getMeaningfulChildren(document)).toEqual(
6482
<html>
6483
<head>
@@ -8267,14 +8260,7 @@ background-color: green;
8260
},
8261
);
8262
8270
- await expect(async () => {
8271
- await waitForAll([]);
8272
- }).toErrorDev(
8273
- [
8274
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
8275
- ],
8276
- {withoutStack: 1},
8277
- );
8263
+ await waitForAll([]);
8264
expect(getMeaningfulChildren(document)).toEqual(
8265
<html>
8266
<head>
packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+21
-47
@@ -89,7 +89,6 @@ describe('ReactDOMServerHydration', () => {
89
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
90
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
91
[
92
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
92
"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:
93
94
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -154,7 +153,6 @@ describe('ReactDOMServerHydration', () => {
153
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
154
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
155
[
157
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
156
"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:
157
158
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -463,7 +461,6 @@ describe('ReactDOMServerHydration', () => {
461
}
462
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
463
[
466
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
464
"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:
465
466
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -498,7 +495,6 @@ describe('ReactDOMServerHydration', () => {
495
}
496
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
497
[
501
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
498
"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:
499
500
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -535,7 +531,6 @@ describe('ReactDOMServerHydration', () => {
531
}
532
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
533
[
538
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
534
"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:
535
536
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -573,7 +568,6 @@ describe('ReactDOMServerHydration', () => {
568
}
569
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
570
[
576
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
571
"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:
572
573
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -606,28 +600,27 @@ describe('ReactDOMServerHydration', () => {
600
}
601
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
602
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
609
- [
610
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
611
- "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:
612
-
613
- - A server/client branch \`if (typeof window !== 'undefined')\`.
614
- - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
615
- - Date formatting in a user's locale which doesn't match the server.
616
- - External changing data without sending a snapshot of it along with the HTML.
617
- - Invalid HTML tag nesting.
618
-
619
- It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
620
-
621
- https://react.dev/link/hydration-mismatch
622
-
623
- <Mismatch isClient={true}>
624
- <div className="parent">
625
- + only
626
- -
627
- ]",
628
- "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
629
- ]
630
- `);
603
+ [
604
+ "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:
605
+
606
+ - A server/client branch \`if (typeof window !== 'undefined')\`.
607
+ - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
608
+ - Date formatting in a user's locale which doesn't match the server.
609
+ - External changing data without sending a snapshot of it along with the HTML.
610
+ - Invalid HTML tag nesting.
611
+
612
+ It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
613
+
614
+ https://react.dev/link/hydration-mismatch
615
+
616
+ <Mismatch isClient={true}>
617
+ <div className="parent">
618
+ + only
619
+ -
620
+ ]",
621
+ "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
622
+ ]
623
+ `);
624
} else {
625
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
626
[
@@ -666,7 +659,6 @@ describe('ReactDOMServerHydration', () => {
659
}
660
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
661
[
669
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
662
"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:
663
664
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -704,7 +696,6 @@ describe('ReactDOMServerHydration', () => {
696
}
697
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
698
[
707
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
699
"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:
700
701
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -741,7 +732,6 @@ describe('ReactDOMServerHydration', () => {
732
}
733
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
734
[
744
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
735
"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:
736
737
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -780,7 +770,6 @@ describe('ReactDOMServerHydration', () => {
770
}
771
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
772
[
783
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
773
"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:
774
775
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -815,7 +804,6 @@ describe('ReactDOMServerHydration', () => {
804
}
805
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
806
[
818
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
807
"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:
808
809
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -852,7 +840,6 @@ describe('ReactDOMServerHydration', () => {
840
}
841
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
842
[
855
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
843
"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:
844
845
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -889,7 +876,6 @@ describe('ReactDOMServerHydration', () => {
876
}
877
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
878
[
892
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
879
"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:
880
881
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -920,7 +906,6 @@ describe('ReactDOMServerHydration', () => {
906
}
907
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
908
[
923
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
909
"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:
910
911
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -955,7 +940,6 @@ describe('ReactDOMServerHydration', () => {
940
}
941
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
942
[
958
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
943
"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:
944
945
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -992,7 +976,6 @@ describe('ReactDOMServerHydration', () => {
976
}
977
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
978
[
995
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
979
"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:
980
981
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1029,7 +1012,6 @@ describe('ReactDOMServerHydration', () => {
1012
}
1013
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1014
[
1032
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1015
"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:
1016
1017
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1074,7 +1056,6 @@ describe('ReactDOMServerHydration', () => {
1056
}
1057
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1058
[
1077
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1059
"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:
1060
1061
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1111,7 +1092,6 @@ describe('ReactDOMServerHydration', () => {
1092
}
1093
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1094
[
1114
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1095
"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:
1096
1097
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1150,7 +1130,6 @@ describe('ReactDOMServerHydration', () => {
1130
// TODO: This message doesn't seem to have any useful details.
1131
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1132
[
1153
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1133
"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:
1134
1135
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1193,7 +1172,6 @@ describe('ReactDOMServerHydration', () => {
1172
// rendered suspense boundaries this test will likely change again
1173
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1174
[
1196
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1175
"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:
1176
1177
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1365,7 +1343,6 @@ describe('ReactDOMServerHydration', () => {
1343
}
1344
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1345
[
1368
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1346
"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:
1347
1348
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1405,7 +1382,6 @@ describe('ReactDOMServerHydration', () => {
1382
}
1383
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1384
[
1408
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1385
"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:
1386
1387
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1468,7 +1444,6 @@ describe('ReactDOMServerHydration', () => {
1444
1445
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1446
[
1471
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1447
"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:
1448
1449
- A server/client branch \`if (typeof window !== 'undefined')\`.
@@ -1531,7 +1506,6 @@ describe('ReactDOMServerHydration', () => {
1506
1507
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1508
[
1534
- "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
1509
"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:
1510
1511
- A server/client branch \`if (typeof window !== 'undefined')\`.
packages/react-dom/src/__tests__/ReactDOMOption-test.js
+2
-8
@@ -237,7 +237,7 @@ describe('ReactDOMOption', () => {
237
expect(node.selectedIndex).toEqual(2);
238
});
239
240
- it('generates a warning and hydration error when an invalid nested tag is used as a child', async () => {
240
+ it('generates a hydration error when an invalid nested tag is used as a child', async () => {
241
const ref = React.createRef();
242
const children = (
243
<select readOnly={true} value="bar">
@@ -266,13 +266,7 @@ describe('ReactDOMOption', () => {
266
onRecoverableError: () => {},
267
});
268
});
269
- }).toErrorDev(
270
- [
271
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
272
- 'Warning: In HTML, <div> cannot be a child of <option>',
273
- ],
274
- {withoutStack: 1},
275
- );
269
+ }).toErrorDev(['Warning: In HTML, <div> cannot be a child of <option>']);
270
option = container.firstChild.firstChild;
271
272
expect(option.textContent).toBe('BarFooBaz');
packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContextDisabled-test.internal.js
+1
-1
@@ -105,7 +105,7 @@ describe('ReactDOMServerIntegrationLegacyContextDisabled', () => {
105
<RegularFn />
106
</span>
107
</LegacyProvider>,
108
- render === clientRenderOnBadMarkup ? 5 : 3,
108
+ render === clientRenderOnBadMarkup ? 4 : 3,
109
);
110
expect(e.textContent).toBe('{}undefinedundefined');
111
expect(lifecycleContextLog).toEqual([]);
packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
-2
@@ -254,7 +254,6 @@ describe('ReactDOMServerIntegrationSelect', () => {
254
<option value="first">First</option>
255
<option value="true">True</option>
256
</select>,
257
- 1,
257
);
258
expect(e.firstChild.selected).toBe(false);
259
expect(e.lastChild.selected).toBe(true);
@@ -269,7 +268,6 @@ describe('ReactDOMServerIntegrationSelect', () => {
268
<option value="first">First</option>
269
<option value="undefined">Undefined</option>
270
</select>,
272
- 1,
271
);
272
expect(e.firstChild.selected).toBe(true);
273
expect(e.lastChild.selected).toBe(false);
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+24
-48
@@ -3782,23 +3782,15 @@ describe('ReactDOMServerPartialHydration', () => {
3782
document.body.appendChild(container);
3783
container.innerHTML = finalHTML;
3784
3785
- await expect(async () => {
3786
- await act(() => {
3787
- ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
3788
- onRecoverableError(error) {
3789
- Scheduler.log(
3790
- 'Log recoverable error: ' + normalizeError(error.message),
3791
- );
3792
- },
3793
- });
3785
+ await act(() => {
3786
+ ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
3787
+ onRecoverableError(error) {
3788
+ Scheduler.log(
3789
+ 'Log recoverable error: ' + normalizeError(error.message),
3790
+ );
3791
+ },
3792
});
3795
- }).toErrorDev(
3796
- [
3797
- 'Warning: An error occurred during hydration. ' +
3798
- 'The server HTML was replaced with client content.',
3799
- ],
3800
- {withoutStack: 1},
3801
- );
3793
+ });
3794
assertLog([
3795
"Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
3796
'Log recoverable error: There was an error while hydrating.',
@@ -3828,21 +3820,13 @@ describe('ReactDOMServerPartialHydration', () => {
3820
container.innerHTML = ReactDOMServer.renderToString(
3821
<DirectTextChild text="good" />,
3822
);
3831
- await expect(async () => {
3832
- await act(() => {
3833
- ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
3834
- onRecoverableError(error) {
3835
- Scheduler.log(normalizeError(error.message));
3836
- },
3837
- });
3823
+ await act(() => {
3824
+ ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
3825
+ onRecoverableError(error) {
3826
+ Scheduler.log(normalizeError(error.message));
3827
+ },
3828
});
3839
- }).toErrorDev(
3840
- [
3841
- 'An error occurred during hydration. The server HTML was replaced with ' +
3842
- 'client content.',
3843
- ],
3844
- {withoutStack: 1},
3845
- );
3829
+ });
3830
assertLog([
3831
"Hydration failed because the server rendered HTML didn't match the client.",
3832
'There was an error while hydrating.',
@@ -3867,25 +3851,17 @@ describe('ReactDOMServerPartialHydration', () => {
3851
container2.innerHTML = ReactDOMServer.renderToString(
3852
<TextChildWithSibling text="good" />,
3853
);
3870
- await expect(async () => {
3871
- await act(() => {
3872
- ReactDOMClient.hydrateRoot(
3873
- container2,
3874
- <TextChildWithSibling text="bad" />,
3875
- {
3876
- onRecoverableError(error) {
3877
- Scheduler.log(normalizeError(error.message));
3878
- },
3854
+ await act(() => {
3855
+ ReactDOMClient.hydrateRoot(
3856
+ container2,
3857
+ <TextChildWithSibling text="bad" />,
3858
+ {
3859
+ onRecoverableError(error) {
3860
+ Scheduler.log(normalizeError(error.message));
3861
},
3880
- );
3881
- });
3882
- }).toErrorDev(
3883
- [
3884
- 'An error occurred during hydration. The server HTML was replaced with ' +
3885
- 'client content.',
3886
- ],
3887
- {withoutStack: 1},
3888
- );
3862
+ },
3863
+ );
3864
+ });
3865
assertLog([
3866
"Hydration failed because the server rendered HTML didn't match the client.",
3867
'There was an error while hydrating.',
packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+1
-8
@@ -471,14 +471,7 @@ describe('ReactDOM HostSingleton', () => {
471
},
472
},
473
);
474
- await expect(async () => {
475
- await waitForAll([]);
476
- }).toErrorDev(
477
- [
478
- `Warning: An error occurred during hydration. The server HTML was replaced with client content.`,
479
- ],
480
- {withoutStack: 1},
481
- );
474
+ await waitForAll([]);
475
expect(hydrationErrors).toEqual([
476
[
477
"Hydration failed because the server rendered HTML didn't match the client.",
packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+36
-61
@@ -196,22 +196,15 @@ describe('rendering React components at document', () => {
196
const container = document.createElement('div');
197
container.textContent = 'potato';
198
199
- expect(() => {
200
- ReactDOM.flushSync(() => {
201
- ReactDOMClient.hydrateRoot(container, <div>parsnip</div>, {
202
- onRecoverableError: error => {
203
- Scheduler.log(
204
- 'Log recoverable error: ' + normalizeError(error.message),
205
- );
206
- },
207
- });
199
+ ReactDOM.flushSync(() => {
200
+ ReactDOMClient.hydrateRoot(container, <div>parsnip</div>, {
201
+ onRecoverableError: error => {
202
+ Scheduler.log(
203
+ 'Log recoverable error: ' + normalizeError(error.message),
204
+ );
205
+ },
206
});
209
- }).toErrorDev(
210
- [
211
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
212
- ],
213
- {withoutStack: 1},
214
- );
207
+ });
208
209
assertLog([
210
"Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
@@ -227,28 +220,21 @@ describe('rendering React components at document', () => {
220
const wrapper = document.createElement('div');
221
wrapper.textContent = 'potato';
222
container.appendChild(wrapper);
230
- expect(() => {
231
- ReactDOM.flushSync(() => {
232
- ReactDOMClient.hydrateRoot(
233
- container,
234
- <div>
235
- <div>parsnip</div>
236
- </div>,
237
- {
238
- onRecoverableError: error => {
239
- Scheduler.log(
240
- 'Log recoverable error: ' + normalizeError(error.message),
241
- );
242
- },
223
+ ReactDOM.flushSync(() => {
224
+ ReactDOMClient.hydrateRoot(
225
+ container,
226
+ <div>
227
+ <div>parsnip</div>
228
+ </div>,
229
+ {
230
+ onRecoverableError: error => {
231
+ Scheduler.log(
232
+ 'Log recoverable error: ' + normalizeError(error.message),
233
+ );
234
},
244
- );
245
- });
246
- }).toErrorDev(
247
- [
248
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
249
- ],
250
- {withoutStack: 1},
251
- );
235
+ },
236
+ );
237
+ });
238
239
assertLog([
240
"Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
@@ -295,15 +281,11 @@ describe('rendering React components at document', () => {
281
});
282
}).toErrorDev(
283
favorSafetyOverHydrationPerf
298
- ? [
299
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
300
- ]
284
+ ? []
285
: [
286
"Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
287
],
304
- {
305
- withoutStack: 1,
306
- },
288
+ {withoutStack: true},
289
);
290
291
assertLog(
@@ -336,26 +318,19 @@ describe('rendering React components at document', () => {
318
}
319
320
// with float the title no longer is a hydration mismatch so we get an error on the body mismatch
339
- expect(() => {
340
- ReactDOM.flushSync(() => {
341
- ReactDOMClient.hydrateRoot(
342
- testDocument,
343
- <Component text="Hello world" />,
344
- {
345
- onRecoverableError: error => {
346
- Scheduler.log(
347
- 'Log recoverable error: ' + normalizeError(error.message),
348
- );
349
- },
321
+ ReactDOM.flushSync(() => {
322
+ ReactDOMClient.hydrateRoot(
323
+ testDocument,
324
+ <Component text="Hello world" />,
325
+ {
326
+ onRecoverableError: error => {
327
+ Scheduler.log(
328
+ 'Log recoverable error: ' + normalizeError(error.message),
329
+ );
330
},
351
- );
352
- });
353
- }).toErrorDev(
354
- [
355
- 'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
356
- ],
357
- {withoutStack: 1},
358
- );
331
+ },
332
+ );
333
+ });
334
assertLog([
335
"Log recoverable error: Hydration failed because the server rendered HTML didn't match the client.",
336
'Log recoverable error: There was an error while hydrating.',
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+14
-27
@@ -143,13 +143,11 @@ describe('ReactDOMServerHydration', () => {
143
});
144
}).toErrorDev(
145
favorSafetyOverHydrationPerf
146
- ? [
147
- 'An error occurred during hydration. The server HTML was replaced with client content.',
148
- ]
146
+ ? []
147
: [
148
" A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
149
],
152
- {withoutStack: 1},
150
+ {withoutStack: true},
151
);
152
expect(mountCount).toEqual(4);
153
expect(element.innerHTML.length > 0).toBe(true);
@@ -238,13 +236,11 @@ describe('ReactDOMServerHydration', () => {
236
});
237
}).toErrorDev(
238
favorSafetyOverHydrationPerf
241
- ? [
242
- 'An error occurred during hydration. The server HTML was replaced with client content.',
243
- ]
239
+ ? []
240
: [
241
"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
242
],
247
- {withoutStack: 1},
243
+ {withoutStack: true},
244
);
245
246
expect(onFocusBeforeHydration).not.toHaveBeenCalled();
@@ -547,13 +543,11 @@ describe('ReactDOMServerHydration', () => {
543
});
544
}).toErrorDev(
545
favorSafetyOverHydrationPerf
550
- ? [
551
- 'An error occurred during hydration. The server HTML was replaced with client content.',
552
- ]
546
+ ? []
547
: [
548
" A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.",
549
],
556
- {withoutStack: 1},
550
+ {withoutStack: true},
551
);
552
553
if (favorSafetyOverHydrationPerf) {
@@ -570,22 +564,15 @@ describe('ReactDOMServerHydration', () => {
564
);
565
domElement.innerHTML = markup;
566
573
- await expect(async () => {
574
- await act(() => {
575
- ReactDOMClient.hydrateRoot(
576
- domElement,
577
- <div dangerouslySetInnerHTML={undefined} />,
578
- {onRecoverableError: error => {}},
579
- );
580
- });
567
+ await act(() => {
568
+ ReactDOMClient.hydrateRoot(
569
+ domElement,
570
+ <div dangerouslySetInnerHTML={undefined} />,
571
+ {onRecoverableError: error => {}},
572
+ );
573
+ });
574
582
- expect(domElement.innerHTML).not.toEqual(markup);
583
- }).toErrorDev(
584
- [
585
- 'An error occurred during hydration. The server HTML was replaced with client content.',
586
- ],
587
- {withoutStack: 1},
588
- );
575
+ expect(domElement.innerHTML).not.toEqual(markup);
576
});
577
578
it('should warn when hydrating read-only properties', async () => {
packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+1
-5
@@ -101,11 +101,7 @@ module.exports = function (initModules) {
101
for (let i = 0; i < console.error.mock.calls.length; i++) {
102
const args = console.error.mock.calls[i];
103
const [format, ...rest] = args;
104
- if (
105
- !shouldIgnoreConsoleError(format, rest, {
106
- TODO_ignoreHydrationErrors: true,
107
- })
108
- ) {
104
+ if (!shouldIgnoreConsoleError(format, rest)) {
105
filteredWarnings.push(args);
106
}
107
}
packages/react-reconciler/src/ReactFiberHydrationContext.js
-10
@@ -187,16 +187,6 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
187
return true;
188
}
189
190
-export function errorHydratingContainer(parentContainer: Container): void {
191
- if (__DEV__) {
192
- // TODO: This gets logged by onRecoverableError, too, so we should be
193
- // able to remove it.
194
- console.error(
195
- 'An error occurred during hydration. The server HTML was replaced with client content.',
196
- );
197
- }
198
-}
199
-
190
function warnNonHydratedInstance(
191
fiber: Fiber,
192
rejectedCandidate: null | HydratableInstance,
packages/react-reconciler/src/ReactFiberWorkLoop.js
+1
-7
@@ -78,10 +78,7 @@ import {
78
79
import {createWorkInProgress, resetWorkInProgress} from './ReactFiber';
80
import {isRootDehydrated} from './ReactFiberShellHydration';
81
-import {
82
- getIsHydrating,
83
- errorHydratingContainer,
84
-} from './ReactFiberHydrationContext';
81
+import {getIsHydrating} from './ReactFiberHydrationContext';
82
import {
83
NoMode,
84
ProfileMode,
@@ -1017,9 +1014,6 @@ function recoverFromConcurrentError(
1014
// Something to consider for a future refactor.
1015
const rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);
1016
rootWorkInProgress.flags |= ForceClientRender;
1020
- if (__DEV__) {
1021
- errorHydratingContainer(root.containerInfo);
1022
- }
1017
}
1018
1019
const exitStatus = renderRootSync(root, errorRetryLanes);
scripts/jest/shouldIgnoreConsoleError.js
+1
-14
@@ -1,10 +1,6 @@
1
'use strict';
2
3
-module.exports = function shouldIgnoreConsoleError(
4
- format,
5
- args,
6
- {TODO_ignoreHydrationErrors} = {TODO_ignoreHydrationErrors: false}
7
-) {
3
+module.exports = function shouldIgnoreConsoleError(format, args) {
4
if (__DEV__) {
5
if (typeof format === 'string') {
6
if (
@@ -32,15 +28,6 @@ module.exports = function shouldIgnoreConsoleError(
28
// We haven't finished migrating our tests to use createRoot.
29
return true;
30
}
35
- if (
36
- TODO_ignoreHydrationErrors &&
37
- format.indexOf(
38
- 'An error occurred during hydration. The server HTML was replaced with client content'
39
- ) !== -1
40
- ) {
41
- // This also gets logged by onRecoverableError, so we can ignore it.
42
- return true;
43
- }
31
}
32
} else {
33
if (