[v2] "React attempted to reuse markup error" on Isomorphic SSR app and Webpack HMR

Version

2.0.0-17

Reproduction

Steps to reproduce

git clone https://github.com/sysgears/apollo-fullstack-starter-kit yarn yarn seed yarn watch Open http://localhost:3000 in browser (this is webpack dev server URL).

Change src/client/app/app.jsx in any way. For example add line console.log("sc comp id:", Footer.styledComponentId); Now refresh the page in browser (this will force page rendering server-side, you can check what page is rendered on server by opening http://localhost:8080 and checking the page)

Expected Behavior

No errors in Web Browser console

Actual Behavior

React error in Web Browser console: Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) ><footer class="sc-bdVaJa bRzCCq" data-r (server) ><footer class="sc-bxivhb gCGYyZ" data-r

What is happening is the styled component id changes each time app.jsx is changed, due to these lines: https://github.com/styled-components/styled-components/blob/b9778f10f23ce7260ce99c72e7729e1b539521c4/src/models/StyledComponent.js#L30-L33

Each time app.jsx module is hot reloaded identifiers will increase counter. And when you force page reload in web browser, on web browser side identifiers will be empty immediately after page refresh. But on the server side identifiers will not be cleared and continue to increase counter on each module change that uses styled-components.

[larixer]

@philpl Yes, I believe it should be consistent if hot module reloading is on… I confirm though, that using https://github.com/styled-components/babel-plugin-styled-components with: [“styled-components”, { “ssr”: true } ] make the ids consistent and works good with Webpack HMR, the React error about mismatched markup doesn’t show up

[kitten]

@ansumanshah @bhough This is due to the styledComponentId being used for generating the “base” classname. When only displayName is set, it is used to generate a styledComponentId and is thus human-readable. When ssr is set, a styledComponentId is already present.

The displayName option is actually literally only for the displayName but has the side effect of generating a human-readable classname.

If you value this classname to be readable, I suggest to only turn on ssr in production 😄

Edit: I guess the babel plugin’s docs will have to be improved so that it explains this better. Might become part of the styled-components-website.