admin管理员组

文章数量:1129026

I am getting the following warning from my NextJS Application:

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen,data-lt-installed

I don't know why it happens, what is the explanation for this?

I am getting the following warning from my NextJS Application:

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen,data-lt-installed

I don't know why it happens, what is the explanation for this?

  • javascript
  • reactjs
  • ecmascript-6
  • next.js
Share Improve this question edited Jul 23, 2023 at 22:58 Ahmed Sbai 16.1k11 gold badges30 silver badges50 bronze badges asked Feb 3, 2023 at 15:38 Md Sajedul IslamMd Sajedul Islam 2,8412 gold badges7 silver badges10 bronze badges
Add a comment  | 

20 Answers 20

Reset to default 545

This is usually caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI, this creates a mismatch between what was rendered on the server and what is rendered on the client.

Extensions similar to Grammarly, ColorZilla and LanguageTool are therefore the cause of this warning, so you have to find out which one is doing this and then disable/configure it to not run on the ports you usually use for development. This is the straightforward fix for the warning, since it is always recommended to avoid extensions in development.

You can find those extra attributes if you inspect the app pure HTML in the Elements section of the devTools

An abbreviation is usually used, like here, lt stands for LanguageTool, gr for Grammaly, and cz for ColorZilla. this can help detect the extension.

Good to know:

You can suppress hydration warnings by setting suppressHydrationWarning to true in the opening <body> tag of the RootLayout:

export default RootLayout({ children }) {
  return (
   <html lang="en">
      <body suppressHydrationWarning={true}>
        {children}
      </body>
    </html>
  )
}

sometimes you have to put it in the opening <html> tag if attributes are added there

<html lang="en" suppressHydrationWarning={true}>

suppresshydrationwarning only works one level deep so if you put it in the <html> element, it won't suppress hydration warnings for the <body> element since it is in a deeper level, that's great! because we don't want to suppress hydration warnings for our server components which are in a deeper level.

Disabling the Grammarly extension solved the problem for me.

Chrome has released a new feature to disable extensions for specific URLs which is great, since this warning seems to just be a development environment issue. Simply put chrome://flags/#extensions-menu-access-control into your Chrome browser to enable this flag and restart Chrome.

After you restart you can click on the extensions icon (in the upper-right corner of your browser), while you are browsing http://localhost:3000 URL, to toggle off your extensions for that URL (only)! No need for the suppressHydrationWarning={true} prop mentioned above.

disabling ColorZilla extension solved the problem for me.

Stop ColorZilla and Grammarly extensions fix my problem.

Update: more extensions that are causing related issues:

  • ColorZilla
  • Grammarly
  • Wikiwand: Wikipedia Modernized
    • Error message: Warning: Extra attributes from the server: style
    • Solution: Change Site Access extension option, from On all sites to on specific sites and enter the URL: https://*.wikipedia.org/*

Just wanted to add to this - if anyone is using chrome extension Grammarly or similar extensions, this causes the same issue as it adds these attributes to the <body/> tag

I was getting the same warning and could not figure it out, I thought it was my UI library but then with some help from the community we were able to figure out it from from a chrome extension.

Once I removed Grammarly this warning never came back! Hope this helps anyone else in the same situation that gets directed to this post!

You should add suppressHydrationWarning on the html tag.

<html lang="en" suppressHydrationWarning>
  <body className={`${inter.className} antialiased`}>
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  </body>
</html>

In my case Disabling the Grammarly and ColorZilla extension solved the problem.

Since this seems to be an issue in development, the following worked for me:

export default function RootLayout({ children }: RootLayoutProps) {
    const isDev = process.env.NODE_ENV === 'development'

    return (
        <html lang="en" suppressHydrationWarning={isDev}>
            <body className={inter.className}>
                <AppProvider>
                    <MainLayout>
                        {children}
                    </MainLayout>
                </AppProvider>
            </body>
        </html>
    )
}

This makes it so you won't have to change your browser settings in every browser you cross test in.

1. Disable extensions

The warning message you're seeing in your JavaScript console, specifically:

Warning: Extra attributes from the server: cz-shortcut-listen...

is related to some attributes being sent from the server that your code might not be handling properly or expecting. This warning is typically not critical and doesn't prevent your application from running, but it's a good practice to address it to ensure that your code remains clean and maintainable.

Temporarily disable browser extensions, except for those required for development in your browser. Browser extensions can sometimes interfere with the behavior of web applications, including altering the content of network requests or injecting additional attributes into HTML elements.

or

2. Prevent hydration

Add suppressHydrationWarning={true} in the opening tag of <body>.

Example: <body className={inter.className} suppressHydrationWarning={true}> your code</body>

This warning message indicates that there are some extra attributes on the HTML element that Next.js received from the server that it does not recognize. These attributes are added by various browser extensions, plugins, or toolbars that modify the HTML of the page.

In your case, the attributes data-new-gr-c-s-check-loaded, data-gr-ext-installed, and cz-shortcut-listen are likely being added by one or more browser extensions that are installed in your browser. These attributes are not recognized by Next.js, which is why it is warning you about them.

To get rid of the warning, you can filter out the data-* attributes that next.js does not recognize by using the dangerouslySetInnerHTML prop on the element.

<div 
    dangerouslySetInnerHTML = {{
        __html: htmlString.replace(
            / data-(?!react[\w-]+=)[\w-]+="[^"]*"/g,
            ''
        ),
    }}
/>

In the app folder and your layout.js file should be like below:

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className} suppressHydrationWarning={true}>
        {children}
      </body>
    </html>
  );
}

There are many Google Extensions for CSS measurements and edits. Most of them are producing errors.

So, after disabling the Measurement extension for the page removed the error.

To avoid this error go to the extensions and switch off your developer mode.

I had a problem with the 1688.com plugin that analyzes images in my browser. After disconnecting the problem was solved.

Mostly ColorZilla extension in chrome is the main culprit. But there might be some other extensions. You can check by disabling all the installed extensions one by one. Hence its not a critical error. You can ignore this error for your next.js application development.

To disable extensions in chrome check the 3 dot icon at the top right corner. Then go to Extensions -> Manage Extensions.

GSAP and NextJS

Adding another posibility case because nobody aproched that here. Using GSAP library for animations.

To solve this issue i aproched the solution posted here (by a gsap creator): https://gsap.com/community/forums/topic/35440-warning-extra-attributes-from-the-server-style/?do=findComment&comment=190094

This is how it worked out:

this file is gonna be the same to everyone.

// useIsomorphicLayoutEffect.ts 
import { useLayoutEffect, useEffect } from "react";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

here make sure to add the plugins you will use.

// components/RegisterComponent.tsx
"use client";

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect ";

const RegisterComponent = () => {
  useIsomorphicLayoutEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
  }, []);

  return null; // The component does not render anything, it's just for registering plugins
};

export default RegisterComponent;

and finally, your animation:

"use client"

import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import RegisterComponent from "./gsapRegister";

export default function AnimationContainer() {
    const element = <div></div>

    // special useEffect for gsap code:
    useGSAP(() => {
        // just to show it:
        gsap.to(element, {})
    })
    return (
        <div>
            <RegisterComponent/>
            {/* everything else under */}
        </div>
    )
}

Versions

"gsap": "^3.12.5",
"next": "^14.2.14",
"@gsap/react": "^2.1.1",

Hope it helps!!

also if you are using multiple route layouts with html / body and then you have a top level one also with html / body elements, it will cause this error.

If you are experiencing this, remove all children group layouts html / body elements and just leave them at the top root one

I am using next js wiht next themes, the next themes was the one that adds classes & styles causing it to show warnings. What solves my issue is, by adding this to <html> on root layout

suppressHydrationWarning={true}

import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
import { CssBaseline } from "@mui/material";
    
  <AppRouterCacheProvider>
        <StyledEngineProvider injectFirst>
          <ThemeProvider
            theme={theme}
            modeStorageKey={themeKey}
            colorSchemeStorageKey={colorMode}
          >
            <InitColorSchemeScript attribute={""} />
            <CssBaseline />
            {children}
          </ThemeProvider>
        </StyledEngineProvider>
      </AppRouterCacheProvider>

For config theme provider in mui with nextjs 14 app router

本文标签：

版权声明：本文标题：javascript - What causes NextJS Warning: &quot;Extra attributes from the server: data-new-gr-c-s-check-loaded... &quot; 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736698294a1948298.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。