Allow Suspense Mismatch on the Client to Silently Proceed (facebook#1…

…6943)

* 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.

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 = '<div>Hello World</div>';
+    ReactDOM.hydrate(
+      <React.Suspense>
+        <div>Hello World</div>
+      </React.Suspense>,
+      element,
+    );
+  });
 });

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);
 }