nextjs - 💡(How to fix) Fix React compiler causes hydration error with multiline className [2 comments, 3 participants]

1. See the hydration error

TL;DR

Remove newline characters from the className attribute to fix the hydration error.

Guidance

• Verify that the issue is caused by the newline characters in the className attribute by checking the server-rendered HTML and the client-side properties.
• Remove the newline characters from the className attribute to ensure it matches on both the server and client sides.
• Consider using a CSS class naming convention that avoids long class names or multiline formatting to prevent similar issues in the future.
• Check the React compiler and Babel plugin configurations to ensure they are not introducing any unnecessary whitespace or formatting issues.

Example

// Before
<div
  className="
    flex min-h-screen items-center justify-center bg-zinc-50 font-sans
    dark:bg-black
  "
>

// After
<div
  className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black"
>

Notes

This solution assumes that the issue is solely caused by the newline characters in the className attribute. If the issue persists after removing the newline characters, further investigation into the React compiler and Babel plugin configurations may be necessary.

Recommendation

Apply the workaround by removing the newline characters from the className attribute, as this is a simple and effective solution to fix the hydration error.