Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suspense and React.lazy isn't working #11960

Closed
Steffi3rd opened this issue Feb 21, 2019 · 2 comments
Closed

Suspense and React.lazy isn't working #11960

Steffi3rd opened this issue Feb 21, 2019 · 2 comments

Comments

@Steffi3rd
Copy link

Steffi3rd commented Feb 21, 2019

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

@wardpeet
Copy link
Contributor

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 💪

@wardpeet wardpeet changed the title Error using <Suspense> Suspense and React.lazy isn't working Feb 22, 2019
@joebentaylor1995
Copy link

Does gatsby support this yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants