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!

[BodaNabeel]

Thanks worked for me.

[salahchaabi]

@bsaisushanth99999 thank you very much!
It helped a lot!

[maxschneidercodes]

Thanks

[RadmanRAZ]

worked !!! thanks a lot

[petter-tchirkov]

that's the correct answer, much appreciated

[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

[b3nThomas]

As an alternative, you can tweak the settings to only allow CZ to modify the page when you actually click the extension.
So you're only opting in to the hydration errors for the lifespan of that tab when you're actually using the color picker.
I personally much prefer this to suppressing hydration errors in any way in React.

[beamcode]

This was the issue for me thanks genius.

[wutangpaul]

Great solution, thank you

[KyorCode]

This is the by far the best solution.

[bloodykheeng]

for me ive tried all solutions and the have failed what i had to do was to disable the browser extension instead and i stop getting the hydration error

hear is the error i got

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch if (typeof window !== 'undefined').
- Variable input such as Date.now() or Math.random() which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.                              <RootLayout>
                            <div
+                             className="surface-0 flex justify-content-center"
-                             className={null}
-                             id="scrnli_recorder_root"
                            >
+                             <div id="home" className="landing-wrapper overflow-hidden">

i noted that i dont have this

    className={null}
-                             id="scrnli_recorder_root"

in my code anywhere so it was a browser extension injecting it instead so i to go and disable the scrnly brwser extension
Screenshot & Screen Recorder Tool

Screenshot & Screen Recorder Tool

and now my code is smooth

[kosiakMD]

the same issue (related to Grammarly), that's creepy

[foysal-m]

I get the following error, even though I tried removing all extensions, and suppressing the error, but it just does not work. Tried with incognito mode too. It's. very bad, as it prevents to write cypress tests as it shows the same error for cypress headless browser

[bloodykheeng]

Put tanstack in a separate file with use client then wrap it over your main app

[foysal-m]

Thanks for looking into this, the problem was using a html webpack plugin which generates a new html on every build. Then I solved it, not having any html from the client side, rather passing all from the server side. Then there is no issues anymore.Hope this makes sense

[bloodykheeng]

Cool 😎

[naglaa77]

✅ Solution (Workaround)
The hydration error is caused by the cz-shortcut-listen="true" attribute injected by the ColorZilla browser extension before React hydration begins. Since this attribute isn’t present in the server-rendered HTML, React throws a hydration mismatch warning in strict mode.

To fix this without disabling the extension, I injected a small client-side script that:

• Removes the attribute before hydration

• Uses a MutationObserver to prevent it from being re-added

Implementation

components/HydrationFix.tsx

`'use client';
import React from 'react';

export function HydrationFix(): React.JSX.Element {
  return (
    <script
      id="hydration-fix"
      dangerouslySetInnerHTML={{
        __html: `
          if (document.body.hasAttribute('cz-shortcut-listen')) {
            document.body.removeAttribute('cz-shortcut-listen');
          }

          const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
              if (
                mutation.type === 'attributes' &&
                mutation.attributeName === 'cz-shortcut-listen'
              ) {
                document.body.removeAttribute('cz-shortcut-listen');
              }
            });
          });

          observer.observe(document.body, {
            attributes: true,
            attributeFilter: ['cz-shortcut-listen']
          });
        `,
      }}
    />
  );
}
`

components/ClientLayout.tsx
`'use client';
import { HydrationFix } from './HydrationFix';

export default function ClientLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <HydrationFix />
      {children}
    </>
  );
}
`
app/layout.tsx
`
import ClientLayout from '@/components/ClientLayout';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  );
}
`React compares the DOM generated by the server with what exists in the browser before hydration. If browser extensions like ColorZilla modify the DOM in between, React detects a mismatch.

This script removes the unwanted attribute before hydration, ensuring React sees a matching DOM. The MutationObserver prevents the attribute from coming back.