Reports

I have having the same problem

export default async function RootLayout(props: RootLayoutProps) {
  const { children } = props;

  const params = await props.params;
  const { locale } = params;

  const messages = await getMessages();

  return (
    <html lang={locale}>
      <Head>
        <meta
          name='viewport'
          content={`width=${viewport.width}, initial-scale=${viewport.initialScale}, maximum-scale=${viewport.maximumScale}, user-scalable=${viewport.userScalable ? 'yes' : 'no'}`}
        />
      </Head>
      <body className={`${inter.className}`}>
        <StoreProvider>
          <ApolloWrapper>
            <NextIntlClientProvider locale={locale} messages={messages}>
              <AuthenticationGuard>
                <ThemeProvider
                  attribute='class'
                  defaultTheme='system'
                  enableSystem
                  disableTransitionOnChange
                >
                  {children}
                  <Toaster />
                </ThemeProvider>
              </AuthenticationGuard>
            </NextIntlClientProvider>
          </ApolloWrapper>
        </StoreProvider>
      </body>
    </html>
  );
}

For some reason it being caused by if I remove it those hydration error go away but I don't want to because I want to be able to do themes anyone else found a solution?

79119844