From d8a76ad5804197108f18b988f6d13c767ab41387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sat, 28 Sep 2019 10:43:53 -0700 Subject: [PATCH] Allow Suspense Mismatch on the Client to Silently Proceed (#16943) * Regression test: Suspense + hydration + legacy * Allow Suspense Mismatch on the Client to Silently Proceed This fixes but isn't actually the semantics that we want this case to have. --- .../__tests__/ReactServerRenderingHydration-test.js | 11 +++++++++++ .../src/ReactFiberHydrationContext.js | 9 ++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index 33e56bba260ef..1707f9f1dbdc5 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -659,4 +659,15 @@ describe('ReactDOMServerHydration', () => { document.body.removeChild(parentContainer); }); + + it('regression test: Suspense + hydration in legacy mode ', () => { + const element = document.createElement('div'); + element.innerHTML = '
Hello World
'; + ReactDOM.hydrate( + +
Hello World
+
, + element, + ); + }); }); diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js index 018a80886e6e4..61f007daca254 100644 --- a/packages/react-reconciler/src/ReactFiberHydrationContext.js +++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js @@ -404,11 +404,10 @@ function skipPastDehydratedSuspenseInstance( let suspenseState: null | SuspenseState = fiber.memoizedState; let suspenseInstance: null | SuspenseInstance = suspenseState !== null ? suspenseState.dehydrated : null; - invariant( - suspenseInstance, - 'Expected to have a hydrated suspense instance. ' + - 'This error is likely caused by a bug in React. Please file an issue.', - ); + if (suspenseInstance === null) { + // This Suspense boundary was hydrated without a match. + return nextHydratableInstance; + } return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance); }