Prop `className` did not match. Server: "sc-kEYyzF gfWKdx" Client: "sc-ifAKCX cFlEyZ"

Environment

next: 6.1.1 babel-plugin-styled-components: 1.8.0 styled-components: 3.3.3

.babelrc

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

Expected Behavior

Server and Client style has to be the same

Actual Behavior

The server-side generates the right style. However, the client-side broke down the UI.

[probablyup]

If they’re different with the babel plugin on and ssr mode enabled, your code likely has different behavior on the server vs client. In general, it’s best to put client-specific enhancements in componentDidMount rather than at construction time so rehydration is not affected.

Some code smells to search for: typeof window !== 'undefined', if (process.browser)

[davidnguyen11]

The library I used the create-react-app to develop and then published it, I run script to compile from ES6 => ES5.

Then in the main site, I used next.js and install the library. The issue happens there.