Hydration failed error in Next.js 15 with Chakra UI 3 using RootLayout component

Question

I'm building a project using Next.js 15 and Chakra UI 3. In my layout.js file, I have the following setup:

import { Provider } from '@/components/ui/provider';

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

provider.jsx

'use client';

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { ColorModeProvider } from './color-mode';

export function Provider(props) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  );
}

pages.jsx

export default function Home() {
  return <div>Hello World!</div>;
}

However, I'm encountering the following error:

Hydration failed because the server-rendered HTML didn't match the client. As a result, this tree will be regenerated on the client. This can happen if a SSR-ed Client Component is used.

How can I resolve this issue? Any suggestions on correctly setting up SSR with Chakra UI in Next.js would be appreciated.

Edit:

next dev --turbopack throws an error. I didn't encounter any issues without the --turbopack flag. The Chakra UI developers are working on the issue.

Thanks for following up :) I had the exact same issue and removing the --turbopack flag fixed it for me as well. You also mentioned the Chakra UI developers are working on the issue. Do you have a link to that issue? — Matthew Liu
– Matthew Liu, Commented Dec 20, 2024 at 4:05

Hashan Hemachandra · Accepted Answer · 2024-11-14 00:29:46Z

0

I am assuming you have not created any Chakra UI provider component to wrap your application.

Please create a provider.js file in your project (anywhere you want, I will create it on the root). Normally it's components/ui/provider

Add these to the provider.js

'use client';

import { ChakraProvider } from '@chakra-ui/react';

export function Provider({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>;
}

Include above provider in you layout.js file

import { Provider } from './provider';

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Now try to run the application. Let me know if you get any errors. Check this documentation and git repo for any concern.

answered Nov 14, 2024 at 0:29

Hashan Hemachandra

4612 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Süleyman TAŞÇI Over a year ago

These configurations were already made; I forgot to mention it. I updated the explanation. The same issue persists. Adding 'use client' to the Layout page resolves the issue, but I want to manage SSR. I only have a Layout and a page.js file; there are no other pages. Despite the error, the page still renders and I can see it in the browser. I've added this information as well.

Hashan Hemachandra Over a year ago

To prevent the layout rendering on client side, we create a separate provider component and make it as a client component. That is the only thing I can think of, If we are not to use 'use client' declarative on where ever we use Chakra UI components, without using use client in provider, the application will not work.

Fatih · Accepted Answer · 2025-03-15 12:25:09Z

0

Here is my solution:

I was add just font class to html tag.

Hydration error is flying somewhere around clouds :)

import { Inter } from "next/font/google"
import Provider from "./provider"

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html className={inter.className} suppressHydrationWarning>
      <head />
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  )
}

answered Mar 15 at 12:25

Fatih

112 bronze badges

1 Comment

Starship Mar 17 at 19:04

Don't add code-only answers. Explain what your code does, why it works, and how it helps to solve the problem. Remember, answers should be useful for future visitors, even if they don't have the exact same code as the OP.

Collectives™ on Stack Overflow

Hydration failed error in Next.js 15 with Chakra UI 3 using RootLayout component

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related