0

I am trying to figure out how to use Chakra UI toast with react 18. Prior to upgrading to react v18, I had no issue with the toast but now I cant load the localhost without the following error:

Unhandled Runtime Error 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.

I tried adding suspense to the _app.tsx - but that doesnt solve the problem.

 <ChakraProvider theme={theme}>
      <ApolloProvider 
          client={apolloClient}
        >
            {getLayout(
              <React.Suspense fallback={<div>Loading...</div>}> <Component {...pageProps} />
              </React.Suspense>
              )
            }
        </ApolloProvider>
      </ChakraProvider>

Does anyone know how to solve the hydration issue with react v18 and chakra UI?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Mel
  • 2,481
  • 26
  • 113
  • 273

0 Answers0