Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hydration Mismatch Error in Next.js with Tailwind CSS and Dynamic Class Names #45

Open
EastTexasElectronics opened this issue Apr 21, 2024 · 0 comments
Open

Hydration Mismatch Error in Next.js with Tailwind CSS and Dynamic Class Names #45

EastTexasElectronics opened this issue Apr 21, 2024 · 0 comments

Comments

@EastTexasElectronics
Copy link

Issue Description:

I am encountering a persistent hydration warning in my Next.js application that uses Tailwind CSS for styling. The error persists even after removing dynamic class names, suggesting a deeper inconsistency in the server-client rendering process. This issue occurs across all major browsers (Chrome, Edge, Firefox) and also persists with a fresh fork of the TailNext repository.

Full Error Message: ( From Chrome)

app-index.js:33 Warning: Prop `className` did not match. Server: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans dark" Client: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans"
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

Steps to Reproduce:

Clone the repo and install dependencies.
Run the application in development mode using npm run dev.
Open the application in a browser to see the error in the console as the page loads.

Expected Behavior:

The application should hydrate without any warnings, with the server-rendered markup matching the client-rendered markup exactly.

Actual Behavior:

The application logs a warning about extra attributes (class, style) that are not expected during the hydration process, indicating a discrepancy between the server and client output.

Attempted Fixes:

I have tried removing all dynamic class and style attributes from the tag.
Ensured that the dynamic class names are consistent between server and client renders.
Checked for any third-party scripts that might alter the DOM before hydration.
Updated all related dependencies to their latest versions.

Additional Information:

Next.js version: 14.2.2

Code snippet from root layout.tsx component

return (
  <html lang="en" className={`motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans`}> 
    <head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body className="tracking-tight antialiased text-gray-900 dark:text-slate-300">
      <Providers>
        <Header />
        <Suspense fallback={<Loading />}>
          <main>{children}</main>
        </Suspense>
        <Footer />
      </Providers>
    </body>
  </html>
);

Issue line:

<html lang="en" className={motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans}>

Tags:

Next.js, hydration error, SSR, Tailwind CSS, bug
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@EastTexasElectronics