Hydration Error in Next.js 15 with React 19 Due to cz-shortcut-listen="true" Attribute Injection from Colorzilla Extension #72035
-
To ReproduceDescription: After updating my Next.js application to:
I encountered a new hydration error that was not present in previous versions. Through investigation, I discovered that the Steps to reproduce:
Findings: The Current vs. Expected behaviorRequest: Could the Next.js team suggest a solution or workaround to prevent this attribute from interfering with hydration without disabling Colorzilla? This would be immensely helpful for developers who rely on both Next.js and the Colorzilla extension. Thank you! Provide environment informationOperating System:
Platform: win32
Arch: x64
Version: Windows 11 Pro
Available memory (MB): 12168
Available CPU cores: 8
Binaries:
Node: 20.12.2
npm: N/A
Yarn: N/A
pnpm: 9.4.0
Relevant Packages:
next: 15.0.2 // Latest available version is detected (15.0.2).
eslint-config-next: 14.1.3
react: 19.0.0-rc-02c0e824-20241028
react-dom: 19.0.0-rc-02c0e824-20241028
typescript: 5.6.2
Next.js Config:
output: N/A Which area(s) are affected? (Select all that apply)Not sure Which stage(s) are affected? (Select all that apply)next dev (local) Additional contextNo response |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 17 replies
This comment was marked as off-topic.
This comment was marked as off-topic.
-
Hi, As these hydration errors come from React and not Next.js, this isn't actionable as a bug report. Going to convert this to a discussion in case other folks have advice related to the ColorZilla extension. |
Beta Was this translation helpful? Give feedback.
-
Chances are you are using "colorzilla" extention, cz-shortcut-listen is inserted into html by the colorzilla extension/add-on. Remove that and everything should work fine! |
Beta Was this translation helpful? Give feedback.
-
According to, https://react.dev/blog/2024/04/25/react-19#compatibility-with-third-party-scripts-and-extensions, hydration errors could be skipped if the changed tags are the body, or head... On which tag is this happening? |
Beta Was this translation helpful? Give feedback.
Could you add
suppressHydrationWarning
to the body tag? I guess you are in control of that.Intriguing that it doesn't work though. Maybe something to report to React? I don't want to speculate, but maybe having two mismatches triggers the warning anyway?