Error gracefully for unsupported SSR features (facebook#13839)

Author: gaearon

packages/react-dom/src/__tests__/ReactServerRendering-test.js

@@ -566,6 +566,29 @@ describe('ReactDOMServer', () => {
     expect(markup).toBe('<div></div>');
   });
 
+  it('throws for unsupported types on the server', () => {
+    expect(() => {
+      ReactDOMServer.renderToString(<React.unstable_Suspense />);
+    }).toThrow('ReactDOMServer does not yet support Suspense.');
+
+    expect(() => {
+      const LazyFoo = React.lazy(
+        () =>
+          new Promise(resolve =>
+            resolve(function Foo() {
+              return <div />;
+            }),
+          ),
+      );
+      ReactDOMServer.renderToString(<LazyFoo />);
+    }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
+
+    expect(() => {
+      const FooPromise = {then() {}};
+      ReactDOMServer.renderToString(<FooPromise />);
+    }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
+  });
+
   it('should throw (in dev) when children are mutated during render', () => {
     function Wrapper(props) {
       props.children[1] = <p key={1} />; // Mutation is illegal

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

@@ -442,4 +442,47 @@ describe('ReactDOMServerHydration', () => {
       '<div>Enable JavaScript to run this app.</div>',
     );
   });
+
+  it('should be able to use lazy components after hydrating', async () => {
+    const Lazy = new Promise(resolve => {
+      setTimeout(
+        () =>
+          resolve(function World() {
+            return 'world';
+          }),
+        1000,
+      );
+    });
+    class HelloWorld extends React.Component {
+      state = {isClient: false};
+      componentDidMount() {
+        this.setState({
+          isClient: true,
+        });
+      }
+      render() {
+        return (
+          <div>
+            Hello{' '}
+            {this.state.isClient && (
+              <React.unstable_Suspense fallback="loading">
+                <Lazy />
+              </React.unstable_Suspense>
+            )}
+          </div>
+        );
+      }
+    }
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(<HelloWorld />);
+    expect(element.textContent).toBe('Hello ');
+
+    ReactDOM.hydrate(<HelloWorld />, element);
+    expect(element.textContent).toBe('Hello loading');
+
+    jest.runAllTimers();
+    await Lazy;
+    expect(element.textContent).toBe('Hello world');
+  });
 });

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -935,6 +935,8 @@ class ReactDOMServerRenderer {
             }
             this.stack.push(frame);
             return '';
+          } else {
+            invariant(false, 'ReactDOMServer does not yet support Suspense.');
           }
         }
         // eslint-disable-next-line-no-fallthrough
@@ -1004,6 +1006,12 @@ class ReactDOMServerRenderer {
             return '';
           }
           default:
+            if (typeof elementType.then === 'function') {
+              invariant(
+                false,
+                'ReactDOMServer does not yet support lazy-loaded components.',
+              );
+            }
             break;
         }
       }