diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index 33e56bba260e..1707f9f1dbdc 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 018a80886e6e..61f007daca25 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); }