Warning: Prop className did not match.
#7423
Comments
|
duplicate #7322 |
|
duplicate of #7322 |
|
Actually seems like you're doing something wrong, eg |
|
Thanks for the info. is there any solution for that at this moment? |
|
In your case it doesn't seem like a problem in Next.js, but rather with your own code. Please use the issue template in the future. |
|
I fixed this issue editing my |
|
Thanks Sergioamjr!! |
|
Sergioamjr
Dude you are the best. Thank you |
|
Why would this error occur when the OP isn't using style-components or MUI? |
But installing |
|
How to call a preset if I use a Typescript? |
|
Use nextjs dynamic import and pass ssr option to be false. I just discovered this method and it works in my case as my components has data to load on client side. option SSR needs to be false so that component is loaded on the client side dynamically and is not SSR.
|
|
The solution is here: https://stackoverflow.com/a/61621949/7741752 |
|
I literally made an exact copy of the styled components example on codesandox and it still did not work !!. I ended up creating a new create-next-app with the styled components example because it works !!! i don't know how... but it will do for now. |
|
@SarKurd Does this solution solved? |
|
@paulius1990 Everybody is throwing their answers here, i literally said i don't use Material UI or styled components and got flagged as duplicate so i gave up and i haven't used active class name for dynamic pages for a very long time as i didn't have a use case for it so i'm not sure if the issue is still there have you tried the official example? https://github.com/vercel/next.js/tree/canary/examples/active-class-name Currently i do this for NON-dynamic pages import Link from 'next/link';
import { useRouter } from 'next/router';
import classNames from 'classnames';
const ActiveLink = ({ children, className = '', activeClassName, onClick, ...props }) => {
const { pathname } = useRouter();
return (
<Link {...props}>
<a
className={classNames(className, {
[activeClassName]: pathname === props.href,
})}
onClick={onClick}
>
{children}
</a>
</Link>
);
};
export default ActiveLink; <ActiveLink
href="/"
className="link"
activeClassName="active"
>
Home
</ActiveLink> |
|
@SarKurd Thanks for your response, but in my case i don't use className approach we need to stick to styled components |
|
have you tried the accepted answer, looks like it works for most |
|
Yes, i tried all mentioned solutions and different babel configurations with no effort |
|
Ensure that you do not have two different version of webpack installed. I had This is because next.js has a hardcoded version of a specific webpack. next.js/packages/next/package.json Line 121 in 48a95d5 This may also happen if you have upgraded to NPM v7. NPM v7 will attempt to resolve peerDependencies, which in my case was pulling in webpack v5 along with v4. |
|
Ye, I had wondered how NPM v7 and its peerDependencies would effect all of my projects!! Brilliant! |
|
Yeah, I don't recommend upgrading to v7 until they add |
I don't have webpack on my Next.JS app, here my pacakge.json |
|
Just because you don't have it in package.json, doesn't mean it doesn't get installed. Use |
|
hi everyone,
my workaround1- downgrade these four:
2- remove 3- reinstall I hope it helps |
|
Ran into this same issue amd in my case I found that when using NO GOOD GOOD |
Having only one webpack 4.44.1 version, also npm version 6.14.4 . So still not the solution in my case |
doesn't work for me :( |
Tried dowgraded React & Next versions even updated to the latest React 17 and Next 10 versions, nothing worked for me. |
it's working!!! |
|
@dkodeit wrote:
That sounds a lot like what I'm seeing. Not using styled components or MUI. Today I added router.asPath to set an 'active' class on menu items and the error appeared. |
|
I found a solution for my situation (as said: not using styled components or Material UI, just like @SarKurd and @dkodeit) once I realised what the warning really means. If I understand correctly, Next.js expects a component to generate identical output on the client side and the server side. However, My solution is to treat the values I'm modifying as state using the useState hook, and implement the useEffect hook to set the state based on the router's asPath value. To illustrate, first my code looked something like this (simplified version): import Link from "next/link";
import { useRouter } from "next/router";
function MainMenu({ menuItems }) {
const currentPath = useRouter().asPath;
return (
<nav>
<ul className="menu">
{menuItems.map((menuItem) => {
const classNames = ["menu-item"];
menuItem.attributes.url === currentPath && classNames.push("active");
return (
<li key={menuItem.id} className={classNames.join(" ")}>
<Link href={menuItem.attributes.url}>
<a>{menuItem.attributes.title}</a>
</Link>
</li>
);
})}
</ul>
</nav>
);
}
export default MainMenu;And now it changed to this: import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
function MainMenu({ menuItems }) {
// Initialize the state as a copy of the menuItems prop.
const [classedMenuItems, setClassedMenuItems] = useState(menuItems);
const currentPath = useRouter().asPath;
// Apply the "active" class as a side-effect dependent on currentPath.
useEffect(() => {
const processedMenuItems = menuItems.map((menuItem) => {
const classNames = ["menu-item"];
menuItem.attributes.url === currentPath && classNames.push("active");
menuItem.className = classNames.join(" ");
return menuItem;
});
setClassedMenuItems(processedMenuItems);
}, [menuItems, currentPath]);
return (
<nav>
<ul className="menu">
{classedMenuItems.map((menuItem) => {
return (
<li key={menuItem.id} className={menuItem.className}>
<Link href={menuItem.attributes.url}>
<a>{menuItem.attributes.title}</a>
</Link>
</li>
);
})}
</ul>
</nav>
);
}
export default MainMenu;So that's how I got rid of the warning. Maybe @timneutkens can confirm that my initial code was the type of problem he meant when he wrote "you're doing something wrong, eg delete props.activeClassName; modifies the props, which you shouldn't do" and let us know if this is the correct solution. |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
and others
I have been having this issue since last night, i did some research but couldn't find any solution
I'm not using Material ui or Styled components
CustomLink
Nav.js
The text was updated successfully, but these errors were encountered: