Still getting hydration errors #10102

drscottlobo · 2025-06-15T17:28:10Z

drscottlobo
Jun 15, 2025

Description

Hi there! I'm still getting constant hydration errors in Next JS. I have removed the --turbo flag from my dev command and I think implemented all the fixes from the Docs on using with Next. But nothing seems to work. I'm still having a hydration error at "<style data-emotion="css-global ad1llf" data-s="">"

Here are is my current package setup:

{
"@chakra-ui/react": "^3.21.0",
"@emotion/react": "^11.14.0",
"next": "^15.3.2",
}

Here is my layout.tsx file:


import { Inter } from "next/font/google";
import "./globals.css";
import { Provider } from "@/components/ui/provider";
import ProgressBarProvider from "@/components/ProgressBarProvider";
import Background from "@/components/Background";
import { Toaster } from "@/components/ui/toaster";
import { VolumeProvider } from "@/store/GlobalVolumeContext";

const inter = Inter({
	variable: "--font-inter",
	subsets: ["latin"],
});

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	return (
		<html
			lang='en'
			suppressHydrationWarning
			className={inter.variable}
		>
			<body>
				<Provider>
					<ProgressBarProvider>
						<Background />
						<VolumeProvider>
							{children}
							<Toaster />
						</VolumeProvider>
					</ProgressBarProvider>
				</Provider>
			</body>
		</html>
	);
}

And my Chakra provider:

"use client";

import system from "@/theme";
import { ChakraProvider } from "@chakra-ui/react";

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

Here is the error from the console, it looks like what is in the Docs currently listed for hydration errors, but I think I have implemented all the suggested fixes. Is there something I am still missing?

https://react.dev/link/hydration-mismatch

...
<AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>

<HTTPAccessFallbackBoundary notFound={}>
<HTTPAccessFallbackErrorBoundary pathname="/playgroun..." notFound={} ...>

<ChakraProvider value={{$$chakra:true, ...}}>

<chakra(div) position="fixed" zIndex={-1} height="100vh" width="100vw">

                          <div className="css-1w3kv6q" ref={null}>

```
                          <style data-emotion="css-global ad1llf" data-s="">
                      ...
                      ...
          ...
```
at throwOnHydrationMismatch (react-dom-client.development.js:4432:1)
at beginWork (react-dom-client.development.js:10804:1)
at runWithFiberInDEV (react-dom-client.development.js:844:1)
at performUnitOfWork (react-dom-client.development.js:15257:1)
at workLoopConcurrentByScheduler (react-dom-client.development.js:15251:1)
at renderRootConcurrent (react-dom-client.development.js:15226:1)
at performWorkOnRoot (react-dom-client.development.js:14524:1)
at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:16349:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:45:1)
at div ()
at eval (factory.js:198:26)
at chakra(div) (webpack-internal:///(app-pages-browser)/node_modules/@emotion/react/dist/emotion-element-489459f2.browser.development.esm.js:56:12)
at Background (Background.jsx:7:3)
at RootLayout (layout.tsx:40:7)

Link to Reproduction

n/a

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

Chakra UI Version

3.21.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

segunadebayo · 2025-06-16T20:46:17Z

segunadebayo
Jun 16, 2025
Maintainer

Could you try removing the next-themes provider to be further debug this?

4 replies

drscottlobo Jun 19, 2025
Author

Thanks for the help Sugun! I don't use the next-themes package anywhere in the application, but it was installed, so I completely removed the package. I also cleared the cache and tried incognito mode just in case it was a browser extension, but still getting the exact same error. I'm going to try commenting out some of the other Providers, such as the VolumeProvider and Progress bar to see if that's what's causing it?

drscottlobo Jun 19, 2025
Author

OK, I think I found the cause, it's the Background component which is just a Box around next/image, any reason on the chakra-ui side that this would be causing the issue?

import notation from "../public/background.jpg";
import { Box } from "@chakra-ui/react";
import Image from "next/image";

export default function Background() {
	return (
		<Box
			position={"fixed"}
			zIndex={-1}
			height={"100vh"}
			width={"100vw"}
		>
			<Image
				src={notation}
				fill
				style={{ objectFit: "cover" }}
				placeholder='blur'
				alt='Handwritten music notation as background'
			/>
		</Box>
	);
}

drscottlobo Jun 19, 2025
Author

Nope, I'm wrong...it looks like it is the ProgressBarProvider...No idea why it is so hard to troubleshoot this.

drscottlobo Jun 19, 2025
Author

So it looks like including the @bprogress/next provider is causing the error.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Still getting hydration errors #10102

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Still getting hydration errors #10102

Uh oh!

drscottlobo Jun 15, 2025

Description

Link to Reproduction

Steps to reproduce

Chakra UI Version

Browser

Operating System

Additional Information

Replies: 1 comment · 4 replies

Uh oh!

segunadebayo Jun 16, 2025 Maintainer

Uh oh!

drscottlobo Jun 19, 2025 Author

Uh oh!

drscottlobo Jun 19, 2025 Author

Uh oh!

drscottlobo Jun 19, 2025 Author

Uh oh!

drscottlobo Jun 19, 2025 Author

drscottlobo
Jun 15, 2025

Replies: 1 comment 4 replies

segunadebayo
Jun 16, 2025
Maintainer

drscottlobo Jun 19, 2025
Author

drscottlobo Jun 19, 2025
Author

drscottlobo Jun 19, 2025
Author

drscottlobo Jun 19, 2025
Author