React.Suspense doesn’t work with Gatsby (yet)
Tags: react, gatsby
Published: 2019-08-01 01:57:07

---
title: React.Suspense doesn’t work with Gatsby (yet)
published: true
tags: react,gatsby
canonical_url: https://www.slightedgecoder.com/2019/07/31/react-suspense-doesnt-work-with-gatsby-yet/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2tlz73n6d0saef5pfiys.jpg
---

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Photo by [Егор Камелев](https://unsplash.com/@ekamelev?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/spider?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_(Image chosen cuz it’s a suspense-invoking cute lil’ creature 😅)_

I was loading components dynamically on [Gatsby](https://www.gatsbyjs.org) using [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy), which required to use [React.Suspense](https://reactjs.org/docs/code-splitting.html#suspense).

But then I got the following message while building the site.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Actually I found out while deploying it on Netlify first 😅 (then ran_ `gatsby build` _locally)_

> WebpackError: Invariant Violation: Minified React error #294; visit https://reactjs.org/docs/error-decoder.html?invariant=294 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

![](https://i0.wp.com/www.slightedgecoder.com/wp-content/uploads/2019/07/build-error-1.jpg?fit=1024%2C396&ssl=1)<figcaption>Fonts look broken on local machine too by the way</figcaption>

The error message points you to https://reactjs.org/docs/error-decoder.html?invariant=294, which shows that

> **ReactDOMServer does not yet support Suspense.**

Nice clear message (no sarcasm intended).

Gatsby [uses ReactDOMServer in the build process](https://github.com/gatsbyjs/gatsby/blob/57390e8da2d89c6abd0ad235c7389f39d072a36f/docs/blog/2018-11-07-gatsby-for-apps/index.md#gatsby-is-for-applications) thus the error occurred.

## Fixing the Offending Code

Below is the offending code using React.lazy causing the issue.

{% gist https://gist.github.com/dance2die/57aef9fb69e78008c8e693b9487a0998 %}

<figcaption>Don’t do this, yet as it’s not supported!</figcaption>

Components are loaded “lazily” on line #6, which caused React.Suspense wrap in the return statement at the bottom.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Lines #28 ~ #30_

So to remove `Suspense`, get rid of `React.lazy` and replace it with a regular [dynamic import()](https://v8.dev/features/dynamic-import), and return a default module.

We need to keep the components loaded in a state, so let’s use [useState](https://reactjs.org/docs/hooks-reference.html#usestate) and load it in the [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) hook.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_If you want to use Class Components, refer to case #1 of my other post, [Loading React Components Dynamically on Demand](https://www.slightedgecoder.com/2017/12/03/loading-react-components-dynamically-demand/#case1), which was written when Hooks weren’t available_

{% gist https://gist.github.com/dance2die/93bb446d110045552177025bf9f9412d %}

<figcaption>This now builds 🙂</figcaption>

`allDirectory` is loaded via a static GraphQL query, and when the directories are loaded, it causes the `useEffect` to render.  
And `loadComponents` (aptly named, right? 😉) loads all components dynamically, and saves it to `components` state, which is used within return statement to render.

_Regarding_ `key={Component}`_, I was too “lazy” to come up with a unique key so used an object instead._

## Parting Words

As the title shows, I just wanted to point out that `Suspense` isn’t working with Gatsby, yet.  
But I ended up fixing the issue and wrote more soon after.

I am going to keep the “fix” part short as it’s already written about in the previous posts already.

If you have a trouble with converting it into using Function Components with hooks, let me know~

- [Loading React Components Dynamically on Demand](https://dev.to/dance2die/loading-react-components-dynamically-on-demand-1a56)
- [Loading React Components Dynamically on Demand using React.lazy](https://dev.to/dance2die/loading-react-components-dynamically-on-demand-using-reactlazy-40f4)

The post [React.Suspense doesn’t work with Gatsby (yet)](https://www.slightedgecoder.com/2019/07/31/react-suspense-doesnt-work-with-gatsby-yet/) appeared first on [Sung's Technical Blog](https://www.slightedgecoder.com).