[SOLVED] NextJS Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded
If you are working on your NextJS project and out of nowhere you start seeing the following warning, and it is driving you nuts, then I have the right solution that will fix this issue for you.
This warning is caused because of some additional attributes that are added to the DOM by some browser extension in your browser. Extensions like Grammarly, ColorZilla, etc. add extra attributes to the HTML code of your application, which leads to a mismatch in the HTML code rendered on the Server side and on the client side of the NextJS application.
How to fix the Warning?
I think by now it should be clear. In order to fix this warning, you have to uninstall the browser extension causing this. In my case, it is the Grammarly extension.
You can find the extensions in the Chrome browser by clicking on the Extensions button next to the URL toolbar.
In order to open any extension, just click on it and it will be opened in a new tab. From there you can remove the extension in Chrome browser.
So if you remove the Chrome extension that is leading to this warning, you will fix this warning.
Disable Extension for Localhost
You can also configure your extension to not work on localhost:3000 for that you will have to first enable this feature in Chrome browser.
To do so, visit the link, chrome://flags/#extensions-menu-access-control in your browser and Enable the feature.
Once this feature is enabled then you can enable and disable the extension for any particular URL. For example, while you are accessing the localhost:3000 URL for your development server, click on the Extensions menu and you will see the enable/disable toggle switch in front of each extension.
Use the toggle switch to switch off the extension for any URL.
Suppress Hydration Warning
Another fix to this problem is using the suppressHydrationWarning flag in your project. You can include it directly in your <body> tag if that is where the additional attributes are being added by the browser extension.
For example,
export default RootLayout({ children }) {
return (
<html lang="en">
<body suppressHydrationWarning={true}>
{children}
</body>
</html>
)
}
You can also include the suppressHydrationWarning in the <html> tag also.
<html lang="en" suppressHydrationWarning={true}>
The suppressHydrationWarning flag should be used at the right place because it doesn't work one level down. So if you use it with the <html> tag then it will not remove the hydration for the <body> tag.
End Note
Not all warnings are because of your code, sometimes some warnings can be caused by the environment too, like in this case. I hope one of the three solutions above, works for you.
