GatsbyJS+React18生产构建时renderToString引发Suspense边界错误求助

错误详情 #

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.

环境配置 #

• GatsbyJS 版本：4.24.1
• React 版本：18.2.0
• 触发场景：生产构建时，或开启DEV_SSR: true的开发模式下

根据资料，Gatsby应该原生支持懒加载和Suspense，但目前不确定是我的实现有误，还是Gatsby存在回归bug。我已在Gatsby官方仓库提交Issue，但尚未得到回复。

实现代码 #

我认为代码实现没有问题，具体如下：

import { lazy, Suspense } from 'react';
const Hero = lazy(() => import('../components/home/Hero'));

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

复现资源 #

已准备好最小复现的CodeSandbox、在线演示站点及代码仓库。

需求 #

希望得到以下帮助：

• 若为实现错误，给出修复方案
• 若确认为Gatsby的bug，给出确认依据，以便我决定是否迁移至Next.js，或降级到React 17并使用@loadable/components

内容的提问来源于stack exchange，提问作者lezan