Chakra Error/Catch Boundaries lose ChakraContext - but only sometimes

[joelrozen]

I have the example chakra repo as a base template, I have not modified the provided Error/Catch Boundaries in the root.tsx, and I have none elsewhere.

I have noticed that sometimes when one of these boundaries are hit, there is no theme at all, sometimes there is.

For example: If I navigate directly to a page that doesn't exist I get (with theme):

If I click a link inside my app that takes me to a page that doesn't exist (same url):

The Chakra Theme is missing.

There are also other instances eg when throwing / erroring from a loader - sometimes the theme is there, sometimes it isn't there, though I haven't been able to narrow down when so can't provide replication for that.

In all instances though, pressing "Back" on my browser will take me back BUT there is NO theme / styling whatsoever on the previous page, it's just plain text/images, it's like all the css has completely disappeared.

I also tried following the example provided by Chakra (which uses renderToString instead of renderToPipeableStream, but then error boundaries are even worse and looking at their issues, you have to create a bunch of dunder routes and it's a real trickery to get anything working (and then of course you lose the streaming ability).

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 🙂