Next.js Discord

Discord Forum

themeProvider hydration warning

Answered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
import "~/styles/globals.css";

import { GeistSans } from "geist/font/sans";
import { type Metadata } from "next";

import { TRPCReactProvider } from "~/trpc/react";
import { ThemeProvider } from "~/components/themeProvider";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" className={`${GeistSans.variable}`}>
      <body>
        <TRPCReactProvider>
          <html lang="en" suppressHydrationWarning>
            <body>
              <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
              >
                {children}
              </ThemeProvider>
            </body>
          </html>
        </TRPCReactProvider>
      </body>
    </html>
  );
}


"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
                                children,
                                ...props
                              }: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
Answered by Yi Lon Ma
why do you have 2 html and body tags?
View full answer

4 Replies

Chum salmonOP
anyone know how a getaround for this? it works fine just wanna get rid of the error.
Yi Lon Ma
why do you have 2 html and body tags?
Answer
@Yi Lon Ma why do you have 2 `html` and `body` tags?
Chum salmonOP
thanks that fixed it