Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
GGAlanSmithee opened this issue Mar 21, 2024 · 5 comments · Fixed by #1947
Closed
Labels
bug Something isn't working released

Comments

@GGAlanSmithee
Copy link

  • 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
Copy link
Author

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
Copy link
Member

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.

Copy link

github-actions bot commented May 2, 2024

🎉 This issue has been resolved in version 9.105.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

@GGAlanSmithee
Copy link
Author

many thanks for the quick action @CodyJasonBennett 🙏🏼

@GGAlanSmithee
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working released
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants