#Hydration error with `hydration` class..?

1 messages · Page 1 of 1 (latest)

rapid citrus
#

I got a hydration error on my html tag, and the dev overlay shows that the difference was in the className, the server rendered className="fixed w-screen h-full top-0 left-0" but the client had className="fixed w-screen h-full top-0 left-0 hydrated". The difference is that the client html tag has a className of hydrated, while the server rendered tag did not. I, of course, have not written anything to add the hydrated className and cause the hydration error (this whole thing seems a bit weird), so I'm wondering if this is a Next.js issue that has been fixed in some version? I use Next.js 15.3.4 (Webpack)

cerulean prairieBOT
#

Hi @rapid citrus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, I don't see any specific information about a hydrated className being automatically added by Next.js that would cause hydration errors. However, the knowledge sources do contain extensive information about hydration errors in Next.js 15.x versions.

The most common causes of hydration errors mentioned in the knowledge sources are:

  1. Browser extensions - This is frequently cited as a cause. Several issues (Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties., Hydration error in fresh Next.js 15 app — Chrome only) were resolved by disabling browser extensions or testing in incognito mode.

  2. Client-side modifications - Using useEffect or other hooks that modify the DOM after initial render, such as adding classes to the <html> or <body> tags.

  3. Third-party libraries - Issues with libraries like Chakra UI, FontAwesome, or theme providers that modify HTML attributes.

Recommended troubleshooting steps:

  1. Test in incognito mode - Disable all browser extensions to see if the hydrated class is being added by an extension
  2. Check for third-party libraries - Review any UI libraries or theme providers you're using that might be adding classes to the <html> tag
  3. Temporary workaround - If needed, you can add suppressHydrationWarning={true} to your <html> tag in your layout, though this should only be used as a temporary measure
#

The knowledge sources do not explicitly mention a hydrated className being added by Next.js itself in version 15.3.4. This suggests it's more likely coming from a browser extension or a third-party library in your project rather than being a Next.js bug.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@rapid citrus Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rapid citrus
#

@cerulean prairie I haven't added anything weird, I do call the defineCustomElements function from @ionic/pwa-elements but that only defines the pwa-* custom elements and has nothing to do with Next.js, hydration or React. I don't have any providers that change the html tag, and it has a fixed value (no server/client branch). The thing is that the name hydrated looks really like something from Next.js/React, and it's weird getting a hydration error when a hydrated className is added.

cerulean prairieBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the knowledge sources provided, I cannot find any information about Next.js or React automatically adding a hydrated className to HTML elements. The knowledge sources do not explicitly mention this behavior as a feature or known issue in Next.js 15.x versions.

However, your observation about @ionic/pwa-elements is worth investigating further. While you mention it "has nothing to do with Next.js, hydration or React," the hydrated className is actually a common pattern used by Stencil.js (the framework that Ionic components are built with) to indicate when a web component has been hydrated. This is separate from React's hydration process.

What's likely happening:

The @ionic/pwa-elements package uses Stencil web components, and Stencil adds a hydrated class to custom elements (and potentially their containers) once they've been initialized on the client side. This would explain why:

  1. The server-rendered HTML doesn't have the hydrated class
  2. The client-side HTML does have it
  3. This causes a hydration mismatch

Potential solutions:

Since the knowledge sources don't provide specific guidance for this scenario, but do mention the suppressHydrationWarning prop as a workaround for unavoidable hydration mismatches (Hydration failed because the server rendered HTML didn't match the client), you could:

  1. Add suppressHydrationWarning={true} to your <html> tag if this is the only hydration issue
  2. Ensure defineCustomElements is called in a way that doesn't affect the <html> tag directly
  3. Check if there's a configuration option in @ionic/pwa-elements to control where the hydrated class is applied
#

I'm sorry, but the knowledge sources do not contain specific information about interactions between Ionic/Stencil components and Next.js hydration, so I cannot provide more detailed guidance on this particular issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: