I am getting the following warning from my Next.js 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?
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.
suppressHydrationWarning prop fixed it for me, but the error should specify which element is throwing the error. Mine was input, form, and button elements within my server actions (which are experimental still, so that might be the issue).
<body suppressHydrationWarning={true}> works well
Disabling the Grammarly extension solved the problem for me.
You could upvote https://chromewebstore.google.com/reviews/9c74943a-2ebb-4f73-af5f-2b2945c97349 to lobby Grammarly to fix their extension.
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:
Warning: Extra attributes from the server: styleSite 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.
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
Add suppressHydrationWarning={true} in the opening tag of <body>.
Example: <body className={inter.className} suppressHydrationWarning={true}> your code</body>
suppressHydrationWarning={true} did not solve the problem for me, rather adding just suppressHydrationWarning on the html tag solved it as metioned in ans by Raja P.B.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,
''
),
}}
/>
dangerouslySetInnerHTML? Should I do it on the <body> tag in the layout.tsx(_app.tsx)? And what should I replace htmlString with since I don't really know where the browser extension could have injected those attributes?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.
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
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!!
Open your localhost on the Incognito tab to solve all of these issues.
It worked for me, no need to disable extensions.
I had a problem with the 1688.com plugin that analyzes images in my browser. After disconnecting the problem was solved.
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
