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;
yarn build
Build should success.
Build fails.
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
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 💪
Most helpful comment
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
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 💪