Warning: Prop className did not match.

[th0th]

Examples bug report

Example name

with-styled-components

Describe the bug

Also posted here: #2538

Using css prop introduced with styled-components v4 causes Warning: Prop className did not match..

To Reproduce

Add any HTML element with css prop.

Expected behavior

Correctly styled rendering on the server side without any warnings.

Screenshots

System information

• OS: Windows
• Chrome
• Version of Next.js: 8.1.0

Additional context

Here is an example I created to demonstrate the issue: https://codesandbox.io/embed/jlwvwyy0ow

Open this and refresh once the building is done: https://jlwvwyy0ow.sse.codesandbox.io/

[kumarabhirup]

Happens to me everytime. +1

[Tomekmularczyk]

The same happens with Next v.7. This error doesn't occur when the server starts, only after making changes in the code.

[elliotbonneville]

I'm seeing the same error. It doesn't appear to affect the live app, but it's very annoying to have it constantly appearing locally.

[cabralada]

I have a similar error, but with inline style.

Warning: Prop `style` did not match. Server: "height:50px;margin-left:4vw;cursor:pointer;width:auto;margin-top:0px" Client: "height:30px;margin-left:4vw;cursor:pointer;width:auto;margin-top:6px"

😢

[th0th]

I hope once enough people raise their voices here this issue will get attention 🙂

[SarKurd]

I face this issue in my simple navbar active className, is there a workaround until official fix?

[timneutkens]

Use 👍 on the initial issue instead of "+1" and "same problem".

If you do feel like posting +1 provide a clear and concise reproduction that is clearly reproducible. Otherwise the comment is not actionable.

This goes for any open-source project you're commenting on.

Thanks 🙏

[c0b41]

Seems like they fixed latest release this bug https://github.com/styled-components/styled-components/issues/2563

[th0th]

Nope, that's a totally different log message, it is the one with yellow background on the screenshot I posted, it disappeared after the update.

First one, warning about different classNames is still there.

[Timer]

Tagging this as up for grabs to investigate by a motivated contributor.

[quantizor]

Hey there, please update babel-plugin-styled-components to the latest version which should fix css prop mismatches: https://github.com/styled-components/babel-plugin-styled-components/releases/tag/v1.10.1

I've noticed an error message in development still, but no ill effects from it so can be safely ignored.

[ThisIsEsh]

Still same after fix posted above, and can't ignore it. Having some layout problems when this error occurs.

[ShayDavidson]

So do I, when this occurs I'm getting layout errors and my component go into a weird state where they do not render based on new props.

It happens for me in an inline style.

[quantizor]

Make sure your babel plugin version is up to date, lots of fixes in the last couple weeks. We also made changes to how we do dev styles in v5 that largely address this issue

[ShayDavidson]

The Prop 'style' does not match is not solved with the babel plugin upgrade.

[quantizor]

"style" is an inline style and nothing to do with styled-components, so that's a totally separate issue

[jass-trix]

what's the fix for this one? i always get this warning everytime i refresh. i always do refresh everytime change something, bad old habit 😅 everytime i do refresh it shows warning and the styling all gone

[masives]

It appears to be an issue that backend generates styled component but client doesn't get it/doesn't use it and instead of using server side rendered style client generates it by itself.

edit: I just downloaded the example and couldn't reproduce the issue while using the same code as in your codepen sandbox. Tested in chrome and firefox and it behaves the same (no error nor warning).

[quantizor]

@jass-trix have you tried the s-c v5 beta? We made a lot of changes to eliminate this issue.

[jass-trix]

@probablyup how to use this version?

[JohnGrisham]

It appears to be an issue that backend generates styled component but client doesn't get it/doesn't use it and instead of using server side rendered style client generates it by itself.

edit: I just downloaded the example and couldn't reproduce the issue while using the same code as in your codepen sandbox. Tested in chrome and firefox and it behaves the same (no error nor warning).

I have this issue as well after upgrading to next 9.0.2 and styled components 4.3.2 but it does not occur every time. I have to go in and out of debug a few times to replicate at certain points. I have attempted the fixes suggested through similar issues such as https://github.com/styled-components/babel-plugin-styled-components/issues/78. Seems to only effect development and I'm experiencing layout breaks in one section of the app. Still not sure if it is related to styled components or next but it does seem to have to do with SSR classnames being different on client/server I'm using the recommended babel plugin to fix this. babel-plugin-styled-components

[quantizor]

We changed how this all works in v5, I’d recommend trying it out.

On Tue, Jul 23, 2019 at 9:42 AM JohnGrisham notifications@github.com wrote:

It appears to be an issue that backend generates styled component but client doesn't get it/doesn't use it and instead of using server side rendered style client generates it by itself.

edit: I just downloaded the example and couldn't reproduce the issue while using the same code as in your codepen sandbox. Tested in chrome and firefox and it behaves the same (no error nor warning).

I have this issue as well after upgrading to next 9.0.2 and styled components 4.3.2 but it does not occur every time. I have to go in and out of debug a few times to replicate at certain points. I have attempted the fixes suggested through similar issues such as styled-components/babel-plugin-styled-components#78 https://github.com/styled-components/babel-plugin-styled-components/issues/78. Seems to only effect development and I'm experiencing layout breaks in one section of the app. Still not sure if it is related to styled components or next but it does seem to have to do with SSR classnames being different on client/server I'm using the recommended babel plugin to fix this. babel-plugin-styled-components

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zeit/next.js/issues/7322?email_source=notifications&email_token=AAELFVTNGZGAJJXB2ARVGVLQA4DCZA5CNFSM4HMQ4H2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2TEYOA#issuecomment-514214968, or mute the thread https://github.com/notifications/unsubscribe-auth/AAELFVSKJJJ4YJSZTC4J4BLQA4DCZANCNFSM4HMQ4H2A .

[JohnGrisham]

I was in the process of trying the beta but I appreciate your quick response 👍 @probablyup

[JohnGrisham]

@probablyup I can confirm that this doesn't seem to be an issue in v5.0.0-beta.8. I look forward to the full release.

[haywirez]

I'm still getting the issue with "^5.0.0-beta.8" and "babel-plugin-styled-components": "^1.10.6" 😞

[278kunal]

Still facing the same issue with "babel-plugin-styled-components": "1.10.1" and "styled-components": "3.4.0".

I am using the following config in .babelrc

"plugins": [
        [
            "babel-plugin-styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ],
        [
            "transform-runtime",
            {
                "regenerator": true
            }
        ],
        "transform-object-assign",
        "transform-class-properties",
        "transform-es2015-modules-commonjs",
        "transform-react-remove-prop-types",
        "transform-imports"
    ],
    "env": {
        "development": {
            "plugins": [
                [
                    "babel-plugin-styled-components",
                    {
                        "ssr": true,
                        "displayName": true,
                        "preprocess": false
                    }
                ],
                "transform-ensure-ignore"
            ]
        },
        "test": {
            "plugins": [
                "dynamic-import-node"
            ]
        }
    }

[JohnGrisham]

@278kunal This may be unrelated but according to styled components when envs are specified styled components plugin has to be in each of the environments. https://github.com/styled-components/babel-plugin-styled-components/issues/78. In my case I had to update to the alpha of the latest release of styled components. I would try that as well as including your plugins in all environments.

[VitalyKrenel]

Hey guys! The issue is still open, but no relevant comments for a month - is there any update? I have the same problem:

Warning: Prop `className` did not match. Server: "sc-bwzfXH bBouZQ" Client: "sc-bdVaJa cVPsWU"

Technically it's fine because it does not affect production, but the message itself is slightly annoying.

[dubKelly]

https://github.com/styled-components/babel-plugin-styled-components/issues/78#issuecomment-361160935

[nilportugues]

@dubKelly thanks for sharing the solution. @timneutkens you way close this... or at least update the example with the working solution :)

[JohnGrisham]

@nilportugues While I can confirm that updating to the latest beta of styled components and using the plugin for styled-components as well as including the plugins for all environments this has only been a partial fix. I am still experiencing this warning after applying all of the solutions. This is more of an issue with styled components I believe since the warning is a result of styles being rendered server side and then rendered as another name in the client. The styled-components plugin is supposed to solve this issue and keep the hashing consistent. https://github.com/styled-components/babel-plugin-styled-components

[xphenixo]

Hi, i solved the problem by using the following set up and it is working just fine!

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
}

https://github.com/zeit/next.js/tree/canary/examples/with-styled-components

[JohnGrisham]

Potentially solved by https://github.com/styled-components/styled-components/releases/tag/v4.4.0 I have not had time to test this yet.

[timneutkens]

Checked with @probablyup and it seems that that release should solve the issue indeed.

[sangdth]

I'm not using styled-components and still get this issue. Please. There are many people here already said this.

[timneutkens]

@sangdth please read this thread: https://twitter.com/timneutkens/status/1154351052973625346

[nvuhung]

I am applying all of solutions but it's not working, the issue still happen.

"next": "^9.0.7", "styled-components": "^4.4.0", "babel-plugin-styled-components": "^1.10.6",

[AryanJ-NYC]

@JohnGrisham were you able to test with styled-components@4.4.0? I just upgraded and am still getting the error.

[JohnGrisham]

@AryanJ-NYC I have not yet tried this version I will let you know when I have and what result I got.

[nitindhar7]

Still happening with styled-components@4.4.1

[alextsoi]

https://github.com/zeit/next.js/issues/7423 Seems there is solution in this URL.

[VienNguyen113]

I'm still got this error too.

[atirudom]

Here to confirm again as @alextsoi said, #7423 solved my issue. (see comment by Sergioamjr)

[tsirolnik]

I'm using MUI with Styled Components and I'm getting this error too.

[girardiricardo]

I'm using styled-components@4.4.1 and still got this error too.

[bengrunfeld]

Not sure if this will actually help anyone (and it may just be shit programming on my end, so apologies if that is the case), but my instance of this error actually came from my own code.

So, in the following code, we have a styled component. Inside the styled component, we check for the existence of the prop displayMobile. If it's there, we use styles, and if not, it returns empty. The error is generated by the second usage of the props retrieval function found inside the template string - ${({ theme }) => theme.colors.green}. As soon as I take that out, the above error goes away. Not sure if this helps anyone out, but it took me an embarrassingly large amount of hours to deduce that.

import styled from "styled-components";

export const ServiceBox = styled.div`
  ${({ displayMobile }) =>
    displayMobile
      ? `
      flex-direction: column;
      width: 15.2rem;
      height: 16.2rem;
      padding-top: 1.7rem;
      justify-content: space-between;
      border: 0.4rem solid ${({ theme }) => theme.colors.green};
    `
      : ""}
`;

[TheDSCPL]

Found the solution.

Either this (better in the production bundle size): https://github.com/zeit/next.js/issues/4068#issuecomment-382298624 or this (same as the above but without checking the environment): https://github.com/zeit/next.js/issues/4068#issuecomment-485014513

I think the boilerplate code in all the links referenced by the styled-components documentation on the use case with Next.js should be updated to include the styled-components babel plugin as well. Because the _document.js and _app.js files aren't the complete boilerplate!

[TheDSCPL]

Well, actually I believe I've found a bug in the hot reload part of Next.JS's dev server.

I got the same warning again so I put a console.log in the _default function inside babel-plugin-styled-components module's lib/index.js file to see when the plugin was being used.

It turns out that the initial build runs the plugin but subsequent rebuilds (whenever a file is edited) don't rerun babel. Is this due to some kind of incremental build algorithm, @timneutkens?

Anyway, I'm not sure of what is causing the problem but it seems to be a problem during the rebuild process.

[timneutkens]

We cache Babel output and only rebuild the parts that cache, if you add a plugin the plugin itself is executed on bootup and the visitors will be executed when you change files.

[DaoHuyTuan]

styled-components/babel-plugin-styled-components#78 (comment)

i confirm this fixed just follow that instruction