Gatsby: Suspense and React.lazy isn't working

Created on 21 Feb 2019  ·  1Comment  ·  Source: gatsbyjs/gatsby

capture d ecran 2019-02-21 a 10 57 39

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

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

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 💪

>All comments

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 💪

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benstr picture benstr  ·  3Comments

totsteps picture totsteps  ·  3Comments

hobochild picture hobochild  ·  3Comments

kalinchernev picture kalinchernev  ·  3Comments

magicly picture magicly  ·  3Comments