Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
davidnguyen11 opened this issue Oct 24, 2018 · 5 comments

Comments

@davidnguyen11
Copy link

davidnguyen11 commented Oct 24, 2018

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
Copy link
Contributor

quantizor commented Oct 24, 2018

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
Copy link
Author

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
Copy link
Contributor

quantizor commented Oct 26, 2018

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
Copy link
Author

davidnguyen11 commented Oct 26, 2018

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants