Warning: Extra attributes from the server: style

[dasnail]

I'm not very experienced with Next.js/React, please forgive me if my question is dumb.

As a first project, I tried to migrate my existing static website to NextJS. So far everything works, except one warning in the console, and I don't understand/know why it happens and where the error is.

I suspect something silly like using class= instead of className=, but everything seems fine. Maybe some third-party Javascript adds a style attribute to some node? But where?

So my question is how to find that particular error. I've clicked on all those links in the console message, but I'm unable to find the root cause of it.

[dasnail]

The warning is only visible in the dev build. In the production build, the console is empty. I guess this is because it's only a warning and not an error.

[samsvin]

It is showing on real bowser, but not showing on icognito.

[michrome]

Are you running any browser extensions? Same error was caused by LastPass here.

[sikaco]

Yes, other extensions maybe cause it too. When I change the browser to "private mode", It's OK and give me a true error of true problem.

[gokturkDev]

For me it was youtube speed controller. For future reference, check all your extensions

[Lewistrick]

Nice catch! For me it was the React Dev Tools extension for Firefox. The error was slightly different though: Warning: Extra attributes from the server: data-locale

[skillitzimberg]

I turned NordPass off on this browser tab and the warning went away. Good to know it's not me doing something funky in the codebase.

[indunil-jay]

You save me from 1 day of debugging🙌. It happened to me due to a browser extension.

[dasnail]

Thank you @michrome. I suspected some browser extension too, but I don't have LastPass and I just tried in two browsers (Safari, Brave) that I don't use regularly and have no plugins installed.

Interestingly, this error and another one ("Warning: A future version of React will block javascript: URLs as a security precaution.") is in my browser console, but only the one about the javascript: URL is printed in the NextJS CLI (Dev server).

How about third-party javascript that modifies the DOM and somehow injects style attributes? Would I have to re-write those? That'd be cumbersome if one uses lots of thirdparty libraries...

[dasnail]

Hmm it seems to happen because I've nested ul within li, like so:

<ul>
  <li></li>
  <li>
    <ul>  <-- here
      <li></li>
    </ul>
  </li>
</ul>

But it seems this is the correct way to do it, according to W3C: https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list

[michrome]

I don't think that nesting is the cause of the error.

[Bhootna8]

I know why it's happing because I also faced this and after trying everything I figured it out.
yeah, the nesting is not causing the error, it's the ul tag.
you just need to set the of value of type attribute in the ul tag.

[neb-b]

Lastpass was causing this error for me. data-lpignore on the input removes the error

[lambou]

Thanks a lot

[Eli-BB8]

Had the same issue, gone when I deleted the comments at the css class that triggered the warning.

[Christopher-Hayes]

In my case, I was using normal <script> for a 3rd party script, when Next wanted me to use Next's <Script> tag.

[medarke]

This was the problem for me. - Thanks

[dontuty123]

thanks.

[vdwalia]

Yeap in my case was
import Head from "next/head";

[Kemboi-Dun]

This worked for me.
Thank you.

[shixindev]

This is also my reason, thank you for your sharing.

[michael-jahn-dev]

For me, the warning appears when implementing a web component which sets a "style" attribute to its tag.

[candidia]

Same happening with web components in Remix for me.

[beratbayram]

I've just suppressed that warning with suppressHydrationWarning={true} but I dont know if it is the right thing to do :(

[ghost]

Interesting. Here is mine.

I find if I do this, it would give this error:

<div className="px-2 font-black hover:cursor-pointer hover:text-[#52E9E0]">
  <a href={process.env.NEWSLETTER_WEBSITE} target="_blank">Newsletter</a>
</div>

However the link is OK on the page, in the source, or in the DOM.

In the source:

In the DOM:

[sent-hil]

Interesting. Here is mine.

I find if I do this, it would give this error:

<div className="px-2 font-black hover:cursor-pointer hover:text-[#52E9E0]">
  <a href={process.env.NEWSLETTER_WEBSITE} target="_blank">Newsletter</a>
</div>

However the link is OK on the page, in the source, or in the DOM.

In the source:

In the DOM:

I'm running into the same error when setting href from environment variable. Where you able to solve it?

[ghost]

No. I can't. I just leave it as is. 😅

[irfan]

Have a look to the documentation

You need to add NEXT_PUBLIC_ prefix to your env var.

[junedkhatri31]

Thanks @irfan

[jaeger-dvlp]

For me, the warning appears when I use a custom attribute that called as "uk-parallax" on a div.
Browser: Safari

         ||
         \/
<div uk-parallax="opacity:0,0,0,1;y:-25%,-25%,-25%,0%;easing:-1;viewport:0.65;" className="w-full font-mark p-0 bg-[#E8E8E8] flex flex-wrap justify-center items-end overflow-hidden">

[tammAtPropertyMe]

With a similar mess of errors in Remix.run I added this little snippet to silence the errors, more so than as a good solution in production.

function clearBrowserPluginInjectionsBeforeHydration() {
  if (document.body.dataset) {
    Object.keys(document.body.dataset).map((attribute) => {
      delete document.body.dataset[attribute];
    });
  }

  setTimeout(
    () =>
      document.querySelectorAll("html > script, html > input").forEach((s) => {
        s.parentNode?.removeChild(s);
      }),
    0
  );
}

function hydrate() {
  startTransition(() => {
    clearBrowserPluginInjectionsBeforeHydration();

    hydrateRoot(
      document,
      <StrictMode>
        <ClientCacheProvider>
          <RemixBrowser />
        </ClientCacheProvider>
      </StrictMode>
    );
  });
}

Please don't use this in production unless you really want to kill browser plugins.

[abdessamadely]

I'm having it in a fresh next project

[cjduncana]

Do you use the Grammarly extension? Could you try disabling that extension and see if the error happens again?

[zelda999]

I had this issue and I found the solution to resolve it. Could you add more suppressHydrationWarning={true} into body?
<body suppressHydrationWarning={true}></body>
And it worked for me.
note: if you check the Incognito browser, it will not appear.

[jedsada-gh]

@zelda999 It's worked. Could you explain me more details?

[zelda999]

Hi @jedsada-gh,
I give me more details why we use it.
Sometimes content will inevitably differ between the server and client, such as a timestamp. You can silence the hydration mismatch warning by adding suppressHydrationWarning={true} to the element. Could you preference by link https://nextjs.org/docs/messages/react-hydration-error ? I hope it helps you more than!!!

[codenomnom]

Grammarly was doing it for me :) I guess any extension that modifies the code will cause this kind of warning.

[Coradesque]

Disabling ColorZilla Extension solved for me.

https://stackoverflow.com/questions/13147210/html-body-shows-cz-shortcut-listen-true-with-chromes-developer-tools

[steroyle]

This fixed the error for me while using Next JS 13.1.6

[erdemeren1234]

Thanks

[jessicaagrs]

Isso corrigiu meu erro, valeu!

[goraydev]

Thanks, man. it worked

[samuelcbird]

Thanks! Worked for me using Remix 2.2.0

[reginpv]

I can confirm that extension LastPass is somewhat causing the issue.

After disabling it no more console.log errors.

[fseafesf]

yes, but why,how to resolve the problem once and for all

[fseafesf]

add this one help me this method gived by a guy downstairs is helpful

[fseafesf]

<html lang="en" suppressHydrationWarning>

[dwyanedeng123]

@fseafesf thanks,it solved my problem

[ahmedh01]

Disabling Loom extension fixed it for me

[nikensss]

For me it's the ThemeProvider component that I got from shadcn. If I remove it, I do not get the error message. But I'm not sure suppressHydrationWarning is a solution, it's just not emitting the error. Is there an actual solution to this? What exactly is the problem? Is clerk malfunctioning because of this?

[andresfernandez89]

Could you resolve it?

[henritouchard]

https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app explains that it will only suppressHydration at the tag level, not below so this shouldn't cause problems except if yo need hydration at this level somewhere else.

[gmoz22]

@leongaban see @henritouchard's response above and why it's okay to use suppressHydration for this particular case.

[Andy-Intelligence]

gsap caused mine, removing the imports fixed my problem, gsap adds a style attribute to an html element in question for some wierd reason

[1antares1]

Yes, I found the reason in my case. Thanks for sharing.

[televators]

I've been running into all kinds of issues with a simple server component form with a server action, and this issue on my end was caused by the Firefox extension "Textarea Cache". It's not a super popular extension but figured I'd mention in case someone else is using it.

[nodirbekprogrammer]

I had the same problem when using bootstrap in react js. And I tried commenting(/* ... */) my elements one by one to find out what the error was. Finally , I found that the error was in the data attribute of the textarea. This is the best way I have come up with to quickly find the error 😅.

[lukeocodes]

If you have organisational folders (folders in parentheses) and a layout.jsx/tsx in that folder, make sure you're not including HTML and Body tags in these layouts. only the rootlayout should contain these.

[pmudassir]

still not fixed any help?

[lukeocodes]

still not fixed any help?

is your code on a public repo?

[pmudassir]

yes.

[lukeocodes]

yes.

Can you link it?!

[pmudassir]

https://github.com/pmudassir/Corinna-ai

[MayankChandratre1]

I had same issue, it showed on all browsers so it wasn't any extension.
But it was next-themes.
If you are using next-themes' ThemeProvider to change light/dark themes then it adds style and class attributes to html of your final build of page which causes this warning,
For now I'm just suppressing it with suppressHydrationWarning

[jitsatya]

I got error for using next-themes for changing theme.
Only way to solve this currently is by using suppressHydrationWarning
I have added it to on root layout.tsx.
This suppress is element level and should not suppress hydration warnings on other elements.
Correct me if I am wrong

[ohabash]

Looks like we have a good idea what causes it. How do we fix it?

[peacefulotter]

Add the suppressHydrationWarning prop to the html tag in your layout.tsx:

<html suppressHydrationWarning lang='en'>

[jnilla]

The automatic google translate feature from Chrome caused this issue for me. This was driving me crazy. For some reason google translate detected my page as Portuguese and it was trying to translate it to English causing this bug to show up.

[abuzaforbg]

I encountered this error while using next-themes for dark mode, as instructed by Shadcn UI. I resolved it by setting a default class name and style for the system theme, which were being automatically generated by next-themes. Here’s the updated code:

<html lang="en" className="dark" style={{ colorScheme: 'dark' }}>

After making this change, the error in the browser console was resolved.

[stussyum]

<html lang="en" // suppressHydrationWarning className="dark" style={{ colorScheme: 'dark' }} >
That was it, thanks I just removed the suppressHydrationWarning

[AdrianRusan-web]

I faced the same warning and the project's working well.
But I think that effect to performance of the project.

[Deluxer]

The problem lies in the interaction between next-themes (on the server-side) and how html is rendered in the server, where next-themes needs a way to know the clases that are being passed.

You should pass the suppressHydrationWarning in html to prevent the error, or alternatively, remove the next-themes dependency

<html lang="en" suppressHydrationWarning>

[NathanZlion]

I got the same issue too. I don't think that this is the right way to do it but the console error went away when I added suppressHydrationWarning to the main layout html. I believe it's an issue with next-themes.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${sanfransiscoPro.variable} ${geistSans.variable} ${geistMono.variable} antialiased font-sanfransisco`} >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

[SnakeEye-sudo]

This warning occurs when the HTML rendered on the server has different attributes than what gets rendered on the client. Common causes in Next.js:

Root Causes:

1. CSS-in-JS Libraries (styled-components, Emotion, etc.) - they add random class names
2. Conditional Rendering based on useEffect or client-side data
3. Server-side props that differ from client-side initial render
4. Browser extensions injecting styles
5. Dynamic styles based on state/props that differ between SSR and CSR

Solutions:

1. Use suppressHydrationWarning (Quick Fix)

<div suppressHydrationWarning>
  {/* Your content */}
</div>

2. For styled-components

Add to pages/_document.js:

import { ServerStyleSheet } from 'styled-components';

PageDocument.getInitialProps = async (ctx) => {
  const sheet = new ServerStyleSheet();
  const originalRenderPage = ctx.renderPage;

  try {
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          sheet.collectStyles(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {sheet.getStyleElement()}
        </>
      ),
    };
  } finally {
    sheet.seal();
  }
};

3. For Emotion CSS-in-JS

// pages/_document.js
import { CacheProvider } from '@emotion/react';
import createEmotionServer from '@emotion/server/create-instance';
import createEmotionCache from '../createEmotionCache';

const clientSideEmotionCache = createEmotionCache();

4. Move code to useEffect (for client-only content)

function MyComponent() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null; // or skeleton
  }

  return <div style={{ /* styles */ }}>Content</div>;
}

5. Use next/dynamic with ssr: false

import dynamic from 'next/dynamic';

const ComponentWithStyles = dynamic(
  () => import('../components/StyledComponent'),
  { ssr: false }
);

6. Check if using class names correctly

Ensure your CSS-in-JS library is configured properly. For inline styles, make sure they're identical:

// ❌ Wrong - random values
const style = { width: Math.random() * 100 };

// ✓ Correct - static values
const style = { width: '100px' };

7. Disable warnings in development (Temporary)

if (typeof window !== 'undefined') {
  const originalError = console.error;
  console.error = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('Extra attributes')) {
      return;
    }
    originalError.call(console, ...args);
  };
}

Best Practices:

• Use next/font for fonts instead of external links
• Keep SSR and CSR renders identical
• For CSS-in-JS, ensure server-side extraction is configured
• Test with next build && next start to catch issues

The error usually appears after rendering because styles are being applied client-side differently than server-side. The suppressHydrationWarning fix works, but finding the root cause is better for performance.