vercel/next.js

React Compiler Causing Hydration Error in Dev Mode When Prop has New Line in Client Component

sxxov opened this issue · 5 comments

sxxov commented

Link to the code that reproduces this issue

https://codesandbox.io/p/github/sxxov/nextjs-15-and-react-compiler-client-component-prop-with-newline-hydration-error-repro/main?file=%2Fapp%2FHello.tsx%3A3%2C31

To Reproduce

  1. Start the application (next dev)
  2. Visit the page
  3. Observe the hydration error in the console
  4. Remove the new line in Hello.tsx's data-anything prop
  5. Observe successful hydration

Current vs. Expected behavior

There should be no hydration error.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.1.0 // Latest available version is detected (15.1.0).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Output (export/standalone)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

icyJoseph commented

Hi!

Could you please use Stackblitz? type next.new in your browser address bar. Codesandbox has so many quirks... at least I can't see your example.

sxxov commented

@icyJoseph i've updated the codesandbox link to remove the workspaceId param that apparently blocks access (??), should work now. let me see if i can repro the example in stackblitz too, thanks!