Styled class name vary in Server vs Client slide when using in next js

[umakantp]

Hi Team,

I created an example using https://github.com/vercel/next.js/tree/canary/examples/with-styled-components with bootstrap-styled.

I created few components using components from bootstrap-styled as follows:

import {Button} from '@bootstrap-styled/v1'

const Btn = () =>  (<Button>Demo</Button>)

export default Btn

Now when I consume/use this Btn component. It throws errors in console as follows:

react-dom.development.js?a814:67 Warning: Prop `className` did not match. Server: "Button-h8watj-0 hcRYRl btn btn-primary" Client: "sc-pNWdM ddwWoV btn btn-primary"
    at button
    at ButtonUnstyled (webpack-internal:///../../node_modules/@bootstrap-styled/v4/dist/@bootstrap-styled/v4.esm.js:3052:5)
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at div
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at div
    at ContainerUnstyled (webpack-internal:///../../node_modules/@bootstrap-styled/v4/dist/@bootstrap-styled/v4.esm.js:14740:5)
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at header
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at HeaderComponent (webpack-internal:///./src/views/common/header/header.js:37:24)

If we carefully see, When rendering from service side, styled component uses component name/display name as prefix in class name i.e. Button-. When it renders on client it doesn't use Button (instead uses sc-)

I have followed the all the guidelines of styled components + bootstrap styled as per doc. Any pointers what could be the issue?

[umakantp]

UPDATE: This is not happening with any custom components which we create locally. It happens only to components which are imported from bootstrap-styled. Either it is a bug or I'm missing on some config may be

[kopax]

I have not tested ssr so I can't help on that one.

[umakantp]

Np. I'll keep adding my notes here as I find more.

I disabled ssr: false as follows in my .babelrc:-

["styled-components", {"ssr": false}]

Now it has stopped using display name as prefix and sticking to sc- only names. They are still different though.

[umakantp]

Here is simple repo which re-produces the bug: https://github.com/umakantp/bootstrap-styled-ssr

Hope it helps in debugging and fixing the problem.

[kopax]

Perhaps @taddei can help?