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?
Disabling the Grammarly extension solved the problem for me.
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). –
Marivelmariya suppressHydrationWarning only works one level deep so if you put it in the body element it shouldn't affect server components which are in a deeper level –
Fluorene <body suppressHydrationWarning={true}> works well –
Meatman 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:
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/*In my case Disabling the Grammarly and ColorZilla extension solved the problem.
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. –
Flugelhorn 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? –
Caddaric 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>
);
}
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>
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.
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.
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!
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
© 2022 - 2024 — McMap. All rights reserved.