Console error - Warning: Extra attributes from the server: class #3192
Assignees
Labels
Comments
|
@brightpixels try using <script
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: `document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');`,
}}
/> |
|
I have a different use case, but the same error. import type { LinksFunction } from "@remix-run/node";
import { LiveReload, Outlet, Scripts } from "@remix-run/react";
import { cssBundleHref } from "@remix-run/css-bundle";
export const links: LinksFunction = () => {
return [
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
};
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<title>Remix: So great, it's funny!</title>
</head>
<body>
<nav>
<ul>
<li>
<a href="/">index</a>
</li>
<li>
<a href="/planning">basketball planning</a>
</li>
</ul>
</nav>
<Outlet />
<Scripts />
<LiveReload />
</body>
</html>
);
}
|
|
this seems like a legitimate hydration error to me - you're modifying the DOM between what the server sends and when react hydrates. Instead, add this class via an effect that runs after hydration. export default function App() {
let [jsEnabled, setJsEnabled] = React.useState(false);
React.useEffect(() => setJsEnabled(true), []);
return (
<html lang="en">
<head>{/* ... */}</head>
<body className={jsEnabled ? "js-enabled" : ""}>{/* ... */}</body>
</html>
);
} |
This was referenced Oct 13, 2023
This was referenced Feb 18, 2024
This was referenced Apr 5, 2024
|
@nemonemi not sure how it does it but this data-gr-c-s attributes are added by your Grammarly plugin |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of Remix are you using?
1.3.1
Steps to Reproduce
Expected Behavior
To add a class to the body called 'js-enabled' without generating console errors.
Actual Behavior
It adds a class to the body call 'js-enabled' BUT it also generates the following console error
The text was updated successfully, but these errors were encountered: