{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/1239","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/1239/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/1239/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/1239/events","html_url":"https://github.com/styled-components/styled-components/issues/1239","id":265292579,"number":1239,"title":"Next.js \"Warning: Prop `className` did not match.\"","user":{"login":"Mensae","id":474743,"avatar_url":"https://avatars2.githubusercontent.com/u/474743?v=4","gravatar_id":"","url":"https://api.github.com/users/Mensae","html_url":"https://github.com/Mensae","followers_url":"https://api.github.com/users/Mensae/followers","following_url":"https://api.github.com/users/Mensae/following{/other_user}","gists_url":"https://api.github.com/users/Mensae/gists{/gist_id}","starred_url":"https://api.github.com/users/Mensae/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mensae/subscriptions","organizations_url":"https://api.github.com/users/Mensae/orgs","repos_url":"https://api.github.com/users/Mensae/repos","events_url":"https://api.github.com/users/Mensae/events{/privacy}","received_events_url":"https://api.github.com/users/Mensae/received_events","type":"User","site_admin":false},"labels":[{"id":425493754,"url":"https://api.github.com/repos/styled-components/styled-components/labels/question%20:question:","name":"question :question:","color":"f9d0c4","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2017-10-13T13:39:32Z","updated_at":"2018-03-25T18:16:05Z","closed_at":"2017-10-13T17:13:19Z","author_association":"NONE","body":"<!-- BUG TEMPLATE -->\r\n## Version\r\n2.1.0\r\n<!-- Please add the babel-plugin-styled-components version and options if applicable -->\r\nnext: 4.0.3\r\nreact: 16.0.0\r\nreact-dom: 16.0.0\r\nstyled-components: 2.2.1\r\nbabel-plugin-styled-components: 1.2.1\r\n\r\n.babelrc\r\n{\r\n  \"presets\": [\r\n    \"next/babel\",\r\n    \"stage-0\"\r\n  ],\r\n  \"plugins\": [\r\n    [\r\n      \"transform-assets-import-to-string\",\r\n      {\r\n        \"baseDir\": \"static\",\r\n        \"baseUri\": \"/\"\r\n      },\r\n      [\r\n        \"babel-plugin-styled-components\",\r\n        {\r\n          \"ssr\": true,\r\n          \"displayName\": true,\r\n          \"preprocess\": false\r\n        }\r\n      ],\r\n      \"syntax-dynamic-import\"\r\n    ]\r\n  ]\r\n}\r\n\r\n\r\n## Reproduction\r\n\r\nterminal:\r\n`npm run dev`\r\n\r\nbrowser (Chrome with Dev tools):\r\nReload page after load (Ctrl+R)\r\n\r\nin Dev Tools -> console:\r\n\"Warning: Prop `className` did not match. Server: \"sc-bxivhb gFixCe\" Client: \"sc-bdVaJa irRjiB\"\r\n\r\n## Steps to reproduce\r\nFollowed [these](https://www.styled-components.com/docs/advanced#nextjsl) steps.\r\n\r\nAlso tried [these](https://github.com/zeit/next.js/tree/master/examples/with-styled-components) steps\r\n\r\n## Expected Behavior\r\nShould work without warnings\r\n\r\n## Actual Behavior\r\nInitial server load is fine, but when I refresh the page I am getting a console warning saying: \"Warning: Prop `className` did not match. Server: 'sc-bxivhb gFixCe' Client: 'sc-bdVaJa irRjiB'\""},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/375991291","html_url":"https://github.com/styled-components/styled-components/issues/1239#issuecomment-375991291","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/1239","id":375991291,"user":{"login":"kitten","id":2041385,"avatar_url":"https://avatars0.githubusercontent.com/u/2041385?v=4","gravatar_id":"","url":"https://api.github.com/users/kitten","html_url":"https://github.com/kitten","followers_url":"https://api.github.com/users/kitten/followers","following_url":"https://api.github.com/users/kitten/following{/other_user}","gists_url":"https://api.github.com/users/kitten/gists{/gist_id}","starred_url":"https://api.github.com/users/kitten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kitten/subscriptions","organizations_url":"https://api.github.com/users/kitten/orgs","repos_url":"https://api.github.com/users/kitten/repos","events_url":"https://api.github.com/users/kitten/events{/privacy}","received_events_url":"https://api.github.com/users/kitten/received_events","type":"User","site_admin":false},"created_at":"2018-03-25T18:16:05Z","updated_at":"2018-03-25T18:16:05Z","author_association":"MEMBER","body":"I've seen a couple of similar reports to this and most of the times it's due to the old Babel config `env` problem unfortunately.\r\n\r\nSee: https://www.styled-components.com/docs/tooling#babel-plugin\r\n\r\n### Quote\r\n\r\n> The plugin call order in your .babelrc file matters. If you're using the env property in your babel configuration, then putting this plugin into the plugins array won't suffice. Instead it needs to be put into each env's plugins array to maintain it being executed first. See this for more information.\r\n\r\nhttps://github.com/styled-components/babel-plugin-styled-components/issues/78\r\n\r\n### Regarding this issue\r\n\r\nSince everyone here is experiencing different causes to the same problem, I'm afraid that you or future commenters won't get the help you **need**. So that we can better help you, please check out the proposed solution in this comment, or this one: https://github.com/styled-components/babel-plugin-styled-components/issues/78\r\n\r\nPlease also don't use `preprocess` as it's experimental and will be deprecated and removed soon (as mentioned in the comment above https://github.com/styled-components/styled-components/issues/1239#issuecomment-370917359)\r\n\r\nAlso be wary of `.extend` as it's a little unpredictable in terms of component ids (https://github.com/styled-components/styled-components/issues/1239#issuecomment-351097102)\r\n\r\nThere's several pending issues, reports, and so on spread around the repository, so I unfortunately can't dig them all up. It's easier for you to just **go to Spectrum or open new issues if you need any help!** :+1: :wink:"}}
{"actor":{"display_login":"kitten"}}