Fixing ClassName did not match error

#nextjs #typescript #styledcomponent #react

Warning: Prop `className` did not match. Server: Client:

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

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
            }
        ]
    ]
}

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

Here's the issue on Github

Ciao

Top comments (6)

Marvellous • Mar 10 '22

{
  "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 }
    ]
  ]
}

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