gatsby: Error with Suspense and lazy loading with gatbsy 4.23.1 and react 18.2 on build

@graysonhicks I see you gave a 👍 to the above suggested solution. Does this mean the Gatsby team recognizes this rather large bug and are working on it?

With DEV_SSR not working with React 18 and Suspense, Gatsby doesn’t actually fully support React 18… which is required for using Gatsby 5.

This seems like a priority bug at the least.

Not sure if the Gatsby team is aware of this but:

• Gatsby still recommends loadable components here and here
• Loadable components do not support React 18
• Gatsby v5 requires React 18

Thanks @lezan I’ve triaged this now!

Try this.

Suspense Helper

I works great in my gatsby 5.12.4 just be sure to add react like below. Tutorial is missing Suspense call in react as `import * as React from ‘react’

import { ReactNode, useEffect, useState, Suspense } from 'react

type Props = { fallback?: ReactNode, children: ReactNode }

export const SuspenseHelper: React.FC<Props> = ({fallback, children}) => {

`const [isMounted, setMounted] = useState<boolean>(false);

useEffect( () => {
    if(!isMounted)
    {
        setMounted(true);
    }
})

return (
    <Suspense fallback={fallback}>
        {!isMounted ? fallback : children}
    </Suspense>
)

};`

then wrap your component as so

const Header = React.lazy(() => import ('@/components/Header'));

<SuspenseHelper fallback={<div>Loading...</div>}> <Header /> </SuspenseHelper>

With this solution I got a Minified React error #421

about the DEV_SSR issue, It seems that the issue is here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/ssr-develop-static-entry.js#L300 ssr-develop-static-entry.js is using renderToString instead of renderToPipeableStream

I’ve tried to path my local Gatsby code with

diff --git a/node_modules/gatsby/cache-dir/ssr-develop-static-entry.js b/node_modules/gatsby/cache-dir/ssr-develop-static-entry.js
index 3b472ac..136c498 100644
--- a/node_modules/gatsby/cache-dir/ssr-develop-static-entry.js
+++ b/node_modules/gatsby/cache-dir/ssr-develop-static-entry.js
@@ -1,7 +1,7 @@
 /* global BROWSER_ESM_ONLY */
 import React from "react"
 import fs from "fs-extra"
-import { renderToString, renderToStaticMarkup } from "react-dom/server"
+import { renderToString, renderToStaticMarkup, renderToPipeableStream } from "react-dom/server"
 import { get, merge, isObject, flatten, uniqBy, concat } from "lodash"
 import nodePath from "path"
 import { apiRunner, apiRunnerAsync } from "./api-runner-ssr"
@@ -12,6 +12,7 @@ import { RouteAnnouncerProps } from "./route-announcer-props"
 import { ServerLocation, Router, isRedirect } from "@gatsbyjs/reach-router"
 import { headHandlerForSSR } from "./head/head-export-handler-for-ssr"
 import { getStaticQueryResults } from "./loader"
+import { WritableAsPromise } from "./server-utils/writable-as-promise"
 
 // prefer default export if available
 const preferDefault = m => (m && m.default) || m
@@ -297,8 +298,22 @@ export default async function staticPage({
     // If no one stepped up, we'll handle it.
     if (!bodyHtml) {
       try {
-        bodyHtml = renderToString(bodyComponent)
+        //bodyHtml = renderToString(bodyComponent)
+
+        const writableStream = new WritableAsPromise()
+         const { pipe } = renderToPipeableStream(bodyComponent, {
+           onAllReady() {
+             pipe(writableStream)
+           },
+           onError(error) {
+             writableStream.destroy(error)
+           },
+         })
+
+         bodyHtml = await writableStream;
+
       } catch (e) {
+        console.error("SSR Error", e);
         // ignore @reach/router redirect errors
         if (!isRedirect(e)) throw e
       }

but I’m not sure if is correct or there are other places that needs to be updated and it seems that the hot reload is not working correctly.