Gatsby: Suspense and React.lazy isn't working

[Steffi3rd]

Description

I have a error on yarn build only when I use <Suspense>
On yarn develop, I have no errors.

Note that I'm not using React.lazy() or Loadable components.

import React, { Suspense } from 'react';

const Dashboard = props => {
  return (
      <Suspense fallback={<>Hey</>}>
        Hello
      </Suspense>
  );
};

export default Dashboard;

Steps to reproduce

yarn build

Expected result

Build should success.

Actual result

Build fails.

Environment

System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.9.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.109
Firefox: 65.0.1
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.0 => 2.0.118
gatsby-cli: ^2.4.6 => 2.4.9
gatsby-image: ^2.0.26 => 2.0.29
gatsby-plugin-emotion: ^4.0.1 => 4.0.3
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.6
gatsby-plugin-sharp: ^2.0.17 => 2.0.20
gatsby-source-filesystem: ^2.0.12 => 2.0.20
gatsby-transformer-sharp: ^2.1.10 => 2.1.13
npmGlobalPackages:
gatsby-cli: 2.4.8

[wardpeet]

Thanks so much for opening this issue! As stated, this is slightly tangential to Gatsby.

Gatsby is using SSR which Suspense & React.Lazy not yet support. You can move to a full client site to use those features but to have the static generation of pages you sadly can't. React recommonds to use the Loadable components package until SSR is resolved.

Original recommondation from React Team:
https://reactjs.org/docs/code-splitting.html#reactlazy

React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

If we can help further--please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby 💪