2

I am trying to code splitting and lazy loading in my website but I am getting an error about Suspense boundary.

Error:

Uncaught Error: The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server.

Info:

I am using GatsbyJS 4.24.1 and React 18.2.0.

I get the error with the production build or in development mode with DEV_SSR: true.

I read a lot but I got the idea GatsbyJS fully support Lazy loading and Suspense, so I do not know if I am doing something wrong or it is just a bug of Gatsby (maybe a regression?). I already post an issue on Gatsby (https://github.com/gatsbyjs/gatsby/issues/36678), but still no answer.

Example:

Looking around I do not think I am doing something wrong. It is just

const Hero = lazy(() => import('../components/home/Hero'));

function Home() {
  return (
    <Layout>
      <Suspense fallback={null}>
        <Hero />
      </Suspense>
    </Layout>
  );
}

Minimal reproduction:

I also created a codesanbox: https://codesandbox.io/s/determined-violet-cs7bxh. You can also find another live example here: https://gatsbysuspensereproduction.gtsb.io/, and the code here: https://github.com/PaulieScanlon/gatsby-suspense-reproduction

Ideal solution:

Looking for a fix (so I am doing something wrong) or a bug confirm (so I can move on and try to migrate migrate to nextjs to overcome the issue, or still with GatsbbyJS but downgrade to React 17 and @loadable/components).

lezan
  • 759
  • 6
  • 23
  • @ferran-buireu I was answering on your answer but it was cancelled. I do not get why I need to switch to React `18 alpha` when I am already using `18.2`. Also, here https://github.com/reactwg/react-18/discussions/37 and here https://github.com/reactwg/react-18/discussions/22 they report full support to Suspense and lazy with React 18 and GatsbyJs with 4.3 release note (https://www.gatsbyjs.com/docs/reference/release-notes/v4.3/#use-renderToPipeableStream-react-18-API) adopted `renderToPipeableStream` – lezan Oct 03 '22 at 08:32
  • 1
    `18.2` is ahead of the alpha version, what was mentioned in the release note of `v3.9` so it should be fully supported, that's why I deleted my answer since doesn't provide anything further that you are already using. – Ferran Buireu Oct 03 '22 at 08:34
  • But what about SSR guard? I am getting UI mismatch, so it is not more a solution? – lezan Oct 03 '22 at 08:36
  • Have you tried a `gatsby build` along with the SSR guard? – Ferran Buireu Oct 03 '22 at 08:46
  • I get `Uncaught Error: Minified React error #423` and `Uncaught Error: Minified React error #418` – lezan Oct 03 '22 at 11:28
  • I am having the same issue. Did you figure it out? – tsdexter Oct 28 '22 at 14:00
  • @tsdexter I opened an issue on gatsby and it was flagged as bug. You can check it by yourself here: https://github.com/gatsbyjs/gatsby/issues/36678 – lezan Nov 01 '22 at 12:32

0 Answers0