DEV Community

Cover image for Fixing ClassName did not match error
Marvellous
Marvellous

Posted on

Fixing ClassName did not match error

Warning: Prop `className` did not match. Server: Client:
Enter fullscreen mode Exit fullscreen mode

This is probably one of the most annoying problem with Next.js, Typescript and styled-component luckily there's a work around for this.

You're gonna need to install babel-plugin-styled-components

yarn add --dev babel-plugin-styled-components
Enter fullscreen mode Exit fullscreen mode

Create a file named .babelrc in the root directory and configure it. Here's the config file.

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

Restart your server and refresh your server and you should be good.

Here's the issue on Github

Ciao

Discussion (3)

Collapse
marvelcodes profile image
Marvellous Author
{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "test": {
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}
Enter fullscreen mode Exit fullscreen mode

Is an alternate config file for the .babelrc file, I haven't tried it yet, I'll update this when I do.

Collapse
ayomiku222 profile image
ayomiku olatunji

Thanks this fix my problem

Collapse
marvelcodes profile image
Marvellous Author

Happy to help ☺️