DEV Community

Cover image for Fixing ClassName did not match error
Marvellous
Marvellous

Posted on

8 2

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

Top comments (6)

Collapse
 
marvelcodes profile image
Marvellous
{
  "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
 
kamcoder5 profile image
KamCoder5

Made an account just to say thank you! I've been stuck on this for days!

Collapse
 
marvelcodes profile image
Marvellous
Comment hidden by post author
Collapse
 
ayomiku222 profile image
Ayomiku Olatunji John

Thanks this fix my problem

Collapse
 
marvelcodes profile image
Marvellous

Happy to help ☺️

Collapse
 
prakaasnike profile image
prakaasnike

thanks

Some comments have been hidden by the post's author - find out more

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more