Hydration Error in Next.js 15 with React 19 Due to cz-shortcut-listen="true" Attribute Injection from Colorzilla Extension

[MonaAghili]

To Reproduce

Description:

After updating my Next.js application to:

• Next.js: 15.0.2
• React: 19.0.0-rc-02c0e824-20241028
• React-DOM: 19.0.0-rc-02c0e824-20241028

I encountered a new hydration error that was not present in previous versions. Through investigation, I discovered that the cz-shortcut-listen="true" attribute, added by the Colorzilla browser extension, was causing the issue.

Steps to reproduce:

1. Update Next.js and React versions as mentioned above.
2. Enable the Colorzilla browser extension.
3. Run the Next.js application and inspect any hydration errors.

Findings:

The cz-shortcut-listen="true" attribute injected by Colorzilla causes a mismatch during the server-client hydration process in Next.js. When Colorzilla is disabled, the hydration error resolves. However, Colorzilla is a tool we rely on heavily, and disabling it whenever using Next.js is not practical.

Current vs. Expected behavior

Request:

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 information

Operating 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 context

No response

[ztanner]

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.

[bsaisushanth99999]

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!

[MonaAghili]

I literally mentioned in my initial description that ColorZilla was causing this issue. So, are we really expected to disable all helpful extensions just to bypass it?

[MasterProvider]

same issue even I did not use chrome extensions

[MonaAghili]

@MasterProvider
Try using incognito mode in your browser to ensure no other factors, like cached data or extensions, are affecting the application. If the issue still occurs, there may be a problem in the source code causing a hydration mismatch. Double-checking your server-side and client-side rendering setup might help!

[MasterProvider]

I already test it before I raised my concern

[MonaAghili]

I understand this issue is different from what I’ve encountered. If you find a solution, please feel free to share it, having another approach on hand could be really helpful if similar issues come up in the future. Thanks, and good luck with troubleshooting!

[icyJoseph]

This one is most likely because MUI or whatever is not being told that it is running in SSR, so it generated non-deterministic classnames

[MasterProvider]

same issue even I did not use chrome extensions

This issue was caused by a hydration problem in TSS-React. It no longer supports nested class selector in Next.js 15

hydration error

sideViewContent:{
    height:'auto',
    position:'relative',
    padding: '6.4rem',
    [theme.breakpoints.down('lg')]: {
      padding: '2.4rem',
    },
    [`& .${classes.appIcon}`]: {
      height: '70px',
      width: '70px'
    },
}

Fixed version

sideViewContent:{
    height:'auto',
    position:'relative',
    padding: '6.4rem',
    [theme.breakpoints.down('lg')]: {
      padding: '2.4rem',
    }
},
appIcon: {
      height: '70px',
      width: '70px'
},

or do it like this

sideViewContent:{
    height:'auto',
    position:'relative',
    padding: '6.4rem',
    [theme.breakpoints.down('lg')]: {
      padding: '2.4rem',
    },
    '& .app-icon': {
      height: '70px',
      width: '70px'
   },
}

[icyJoseph]

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?

[MonaAghili]

the body tag

[icyJoseph]

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?

[MasterProvider]

thank for suggestion I tried it but suppressHydrationWarning did not suppress the warning

[icyJoseph]

@MasterProvider not for your case. In your case the class names generated in server and client are diverging, that usually happens when the CSS in JS library is not setup for SSR

[MonaAghili]

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?

Thank you so much @icyJoseph! I’ll give it a try to see if it solves the problem

[MonaAghili]

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?

This solution resolved the issue.
Thank you