Next.js: Warning: Prop `className` did not match.

Created on 25 May 2019  路  31Comments  路  Source: vercel/next.js

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

import { withRouter } from "next/router";
import Link from "next/link";
import React, { Children } from "react";
import cx from "classnames";

const ActiveLink = ({ router, children, ...props }) => {
  const child = Children.only(children);

  const className = cx(child.props.className, {
    [props.activeClassName]: router.asPath === props.as && props.activeClassName
  });

  delete props.activeClassName;

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
};

export default withRouter(ActiveLink);
````

**Nav.js**
```javascript

import "../../static/styles/Nav.scss";

const Nav = () => {
  return (
    <nav className="navbar">
      <Link
        href="/player?name=xXSARKURDZz&platform=psn"
        as="/player/psn/xXSARKURDZz"
        activeClassName="navbar__item-active"
      >
        <a className="navbar__item">Profile</a>
      </Link>

      <Link
        href="/gambit?name=xXSARKURDZz&platform=psn"
        as="/player/psn/xXSARKURDZz/gambit"
        activeClassName="navbar__item-active"
      >
        <a className="navbar__item">Gambit</a>
      </Link>

    </nav>
  );
};

export default Nav;
picture SarKurd

Most helpful comment

I fixed this issue editing my .babelrc file to

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}
picture Sergioamjr on 1 Oct 2019
👍55 ❤25 🚀9 😄9 👀7

All 31 comments

duplicate #7322

c0b41 picture c0b41 on 26 May 2019

duplicate of #7322

timneutkens picture timneutkens on 26 May 2019

Actually seems like you're doing something wrong, eg delete props.activeClassName; modifies the props, which you shouldn't do.

timneutkens picture timneutkens on 26 May 2019
👍1

Thanks for the info. is there any solution for that at this moment?

SarKurd picture SarKurd on 26 May 2019
👎1

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.

timneutkens picture timneutkens on 26 May 2019
👍1

https://github.com/styled-components/babel-plugin-styled-components/issues/78#issuecomment-361160935

dubKelly picture dubKelly on 27 Aug 2019

I fixed this issue editing my .babelrc file to

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}
Sergioamjr picture Sergioamjr on 1 Oct 2019
👍55 ❤25 🚀9 😄9 👀7

Thanks Sergioamjr!!
This solves the issue.

codyng picture codyng on 11 Oct 2019

Sergioamjr

.babelr

Dude you are the best. Thank you

ch3ll0v3k picture ch3ll0v3k on 8 Dec 2019

Why would this error occur when the OP isn't using style-components or MUI?

hutber picture hutber on 27 Dec 2019

I fixed this issue editing my .babelrc file to

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

But installing babel-plugin-styled-components on a next-expo app with @expo/next-adapter takes forever.

5ervant picture 5ervant on 28 Feb 2020
👍4 ❤1 😕1

How to call a preset if I use a Typescript?

flppv picture flppv on 19 Mar 2020
👍6

Use nextjs dynamic import and pass ssr option to be false.
https://nextjs.org/docs/advanced-features/dynamic-import

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.
In my case, the slider components has classes that are initialized and added to elements on client side after the document window is ready. So, the solution will work in all similar cases where the classes are initialized and added on the client side. See my code below.

const AGSlider = dynamic( () => import('../components/slider'), { ssr: false, loading: () => <Loader /> } )

gauravkrp picture gauravkrp on 4 May 2020

The solution is here: https://stackoverflow.com/a/61621949/7741752

diegomjasso picture diegomjasso on 5 May 2020
👎9

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.

kevinseabourne picture kevinseabourne on 18 Jun 2020

This fixed it for me
https://github.com/MarchWorks/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc

zer0blockchain picture zer0blockchain on 28 Jun 2020
❤3 🚀1 👍1

@SarKurd Does this solution solved?
None From above worked for me. Still exists in dev environment.

paulius1990 picture paulius1990 on 14 Oct 2020

@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;
````

```js
   <ActiveLink
                href="/"
                className="link"
                activeClassName="active"
            >
                Home
  </ActiveLink>
SarKurd picture SarKurd on 14 Oct 2020

@SarKurd Thanks for your response, but in my case i don't use className approach we need to stick to styled components

paulius1990 picture paulius1990 on 14 Oct 2020

have you tried the accepted answer, looks like it works for most

SarKurd picture SarKurd on 14 Oct 2020

Yes, i tried all mentioned solutions and different babel configurations with no effort

paulius1990 picture paulius1990 on 14 Oct 2020

Ensure that you do not have two different version of webpack installed.

I had [email protected] and [email protected] in my dependency tree (npm ls --depth=2) and this was causing this issue.

This is because next.js has a hardcoded version of a specific webpack.

https://github.com/vercel/next.js/blob/48a95d58048c4556417c0e2fbc05799a5b33a9ac/packages/next/package.json#L121

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.

gajus picture gajus on 20 Oct 2020
👍1

Ye, I had wondered how NPM v7 and its peerDependencies would effect all of my projects!! Brilliant!

hutber picture hutber on 21 Oct 2020

Yeah, I don't recommend upgrading to v7 until they add overrides. I found it virtually impossible to make it work. You can of course disable the peer installing behaviour, but then why update at all.

gajus picture gajus on 21 Oct 2020

Ensure that you do not have two different version of webpack installed.

I had [email protected] and [email protected] in my dependency tree (npm ls --depth=2) and this was causing this issue.

This is because next.js has a hardcoded version of a specific webpack.

https://github.com/vercel/next.js/blob/48a95d58048c4556417c0e2fbc05799a5b33a9ac/packages/next/package.json#L121

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.

I don't have webpack on my Next.JS app, here my pacakge.json

"dependencies": {
    "@chakra-ui/core": "^0.8.0",
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "@types/react-slick": "^0.23.4",
    "emotion-theming": "^10.0.27",
    "lodash": "^4.17.20",
    "next": "9.5.5",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "react-hook-form": "^6.9.2",
    "react-is": "16.13.1",
    "react-slick": "^0.27.12",
    "slick-carousel": "^1.8.1",
    "styled-components": "5.2.0",
  },
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/preset-env": "7.12.1",
    "@babel/preset-react": "7.12.1",
    "@babel/preset-typescript": "7.12.1",
    "@nrwl/cli": "10.3.1",
    "@nrwl/cypress": "10.3.1",
    "@nrwl/eslint-plugin-nx": "10.3.1",
    "@nrwl/jest": "10.3.1",
    "@nrwl/next": "10.3.1",
    "@nrwl/react": "10.3.1",
    "@nrwl/web": "10.3.1",
    "@nrwl/workspace": "10.3.1",
    "@testing-library/react": "11.1.0",
    "@types/jest": "26.0.14",
    "@types/lodash": "^4.14.162",
    "@types/node": "~14.11.10",
    "@types/react": "16.9.53",
    "@types/react-dom": "16.9.8",
    "@types/react-is": "16.7.1",
    "@types/styled-components": "5.1.4",
    "@typescript-eslint/eslint-plugin": "4.4.1",
    "@typescript-eslint/parser": "4.4.1",
    "babel-jest": "26.5.2",
    "babel-plugin-styled-components": "1.11.1",
    "cypress": "^5.4.0",
    "dotenv": "8.2.0",
    "eslint": "7.11.0",
    "eslint-config-prettier": "6.13.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.3.1",
    "eslint-plugin-react": "7.21.4",
    "eslint-plugin-react-hooks": "4.1.2",
    "jest": "26.5.3",
    "prettier": "2.1.2",
    "ts-jest": "26.4.1",
    "ts-node": "~9.0.0",
    "typescript": "~4.0.3"
  }
paulius1990 picture paulius1990 on 21 Oct 2020

Just because you don't have it in package.json, doesn't mean it doesn't get installed. Use npm ls --depth=2 to inspect your dependency tree.

gajus picture gajus on 21 Oct 2020

hi everyone,
I had the same problem with materialUI and FluentUI front-end frameworks
my Dependencies :

"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"axios": "^0.21.0",
"jss-rtl": "^0.3.0",
"next": "10.0.0",
"next-pwa": "^3.1.5",
"next-redux-wrapper": "^6.0.2",
"next-seo": "^4.14.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sass": "^1.27.0"
},
"devDependencies": {
"@types/redux-persist": "^4.3.1",
"redux-devtools-extension": "^2.13.8",
"typescript": "^4.0.5"
}

my workaround

1- downgrade these four:

"next": "^9.5.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass": "^1.26.11"

2- remove .next and node_modules folders

3- reinstall yarn install

I hope it helps

sorenabedi picture sorenabedi on 30 Oct 2020

Ran into this same issue amd in my case I found that when using asPath it triggers the className doesn't match issue. If I use router.route or router.pathname everything works without issue. Note the OP's code is using asPath as well.

NO GOOD

<style jsx>{`
  .sidebar {
    ${router.asPath === '/some-route'
      ? 'border: 2px solid red;'
      : 'border: 2px solid blue;'}
  }
`}</style>

GOOD

<style jsx>{`
  .sidebar {
    ${router.route === '/some-route'
      ? 'border: 2px solid red;'
      : 'border: 2px solid blue;'}
  }
`}</style>
dkodeit picture dkodeit on 31 Oct 2020

Just because you don't have it in package.json, doesn't mean it doesn't get installed. Use npm ls --depth=2 to inspect your dependency tree.

Having only one _webpack 4.44.1_ version, also npm version _6.14.4_ . So still not the solution in my case

paulius1990 picture paulius1990 on 31 Oct 2020

Ran into this same issue amd in my case I found that when using asPath it triggers the className doesn't match issue. If I use router.route or router.pathname everything works without issue. Note the OP's code is using asPath as well.

NO GOOD

<style jsx>{`
  .sidebar {
    ${router.asPath === '/some-route'
      ? 'border: 2px solid red;'
      : 'border: 2px solid blue;'}
  }
`}</style>

GOOD

<style jsx>{`
  .sidebar {
    ${router.route === '/some-route'
      ? 'border: 2px solid red;'
      : 'border: 2px solid blue;'}
  }
`}</style>

doesn't work for me :(

paulius1990 picture paulius1990 on 31 Oct 2020

hi everyone,
I had the same problem with materialUI and FluentUI front-end frameworks
my Dependencies :

"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"axios": "^0.21.0",
"jss-rtl": "^0.3.0",
"next": "10.0.0",
"next-pwa": "^3.1.5",
"next-redux-wrapper": "^6.0.2",
"next-seo": "^4.14.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sass": "^1.27.0"
},
"devDependencies": {
"@types/redux-persist": "^4.3.1",
"redux-devtools-extension": "^2.13.8",
"typescript": "^4.0.5"
}

my workaround

1- downgrade these four:

"next": "^9.5.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass": "^1.26.11"

2- remove .next and node_modules folders

3- reinstall yarn install

I hope it helps

Tried dowgraded React & Next versions even updated to the latest React 17 and Next 10 versions, nothing worked for me.

paulius1990 picture paulius1990 on 31 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sospedra picture sospedra  路  3Comments
havefive picture havefive  路  3Comments
renatorib picture renatorib  路  3Comments
YarivGilad picture YarivGilad  路  3Comments
YarivGilad picture YarivGilad  路  3Comments