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

[davidnguyen11]

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.

[quantizor]

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]

I don't have those ones. Here is what I did.

I have a package (A) using styled-components to manage components. In the main site, I install it and use it. This error happens exactly on the component which I installed from package (A).

[quantizor]

Ah is the usage in the library you’re using transpiled as well? All styled components need to be run through the babel plugin to ensure they’re consistent for SSR. Babel doesn’t transpile things in node_modules by default.

[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.

[lucleray]

There's a related issue for this in the nextjs repo : vercel/next.js#4068

I don't think the error comes from styled-components itself, but rather from either nextjs or some babel config.