Skip to content

Hydration error with no visible solution #926

Open
@br34th3r

Description

We have a Shopify app that contains a dashboard with some metrics being queried from Prisma from MongoDB Atlas. We are seeing an error

This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

This error only appears in production on the minified version of the app and only appears on the dashboard and settings page (large amounts of loader data being fetched). We have attempted adding startTransition to any of the useEffect calls that sit within those pages, we've tried using singleFetch, we've tried modularising. Essentially we are stuck because there's no trace to any lines of code that specifically cause the error, and there's no comparison differences in Sentry between the hydrated and un-hydrated UI. We aren't using any data that could change from server to client render (i.e. Date, Math.random(), etc.) and we've spent about a week trying to fix the issue to no avail.

Any further help would be greatly appreciated!

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions