Since release 9.99.3 my app breaks if I use suspend while rendering a Text component

[GGAlanSmithee]

• three version: 0.160.0
• @react-three/fiber version: 8.15.19
• @react-three/drei version: 9.99.3
• node version: v20.11.0
• npm (or yarn) version: 10.4.0

Problem description:

I have an application that uses suspend to lazy load a Recast navmesh.

Ever since #1841 was merged - or since release 9.99.3 - I cannot have both a <Text /> component, and also use suspend elsewhere, even if in an unrelated component. I have tested to wrap my component(s) in <Suspense/> in different configurations, but with no effect.

Relevant code:

Here is simple reproduction: https://github.com/GGAlanSmithee/react-three-dre-text-bug-reproduction

If you look in the Scene.tsx file, there are two code blocks in the jsx that you can uncomment to replicate the issue:

export const Scene = () => (
  <>
    <group position-y={2}>
      <Text>Testing</Text>
    </group>

    <Box args={[1, 1, 1]} position={[0, 0.5, 0]}>
      <meshStandardMaterial color="#f00" />
    </Box>

    {/* uncomment below, and the scene won't render - it will fail silently */}
    {/* <Test /> */}

    {/* uncomment below, and the scene won't render - it will crash (exception in browser console) */}
    {/* <RecastNavmesh>
        <Plane args={[100, 100]} rotation-x={-Math.PI / 2}>
          <meshStandardMaterial color="#333" />
        </Plane>
      </RecastNavmesh> */}
  </>
);

Instructions

• clone repo: https://github.com/GGAlanSmithee/react-three-dre-text-bug-reproduction
• install deps: npm i
• run: npm run dev
• go to link in console
• uncomment repsective code, as shown above

[GGAlanSmithee]

ping @CodyJasonBennett

sorry to bother you but this issue is preventing me from upgrading both drei and other libraries that depend on suspend.

Is there anything I can do to ease debugging this? It should be fairly easy to reproduce the issue by the linked repository.

many thanks 🙇🏼

[CodyJasonBennett]

This seems like a deeper issue since React allows multiple promises to suspend within a tree -- otherwise it's impossible to not have waterfalls. I'm reverting that patch though as it's no longer needed.

[github-actions]

🎉 This issue has been resolved in version 9.105.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[GGAlanSmithee]

many thanks for the quick action @CodyJasonBennett 🙏🏼

[GGAlanSmithee]

I can also confirm that the fix works - I updated all relevant packages and everything is working as expected