styled components HOCs do not work in production builds

Bug report

Describe the bug

I have an HOC that uses styled components to generate a button. The HOC works in development mode. Given two different CSS inputs, it produces two different components:

However, in production builds, only one component is produced:

I’ve pared this down to a very small example that anyone can clone an run. Here is the code listing:

https://github.com/dminkovsky/next-styled-broken-prod/blob/master/pages/index.js

To Reproduce

1. Clone https://github.com/dminkovsky/next-styled-broken-prod
2. yarn run dev and go to localhost:3000, observe dev result.
3. yarn run build && yarn run start and go to localhost:3000, observe prod result.

Expected behavior

Prod and dev should be the same.

Screenshots

Please see above.

System information

• OS: macOS 10.14.6
• Browser (if applies): N/A, same in all browsers.
• Version of Next.js: 9.2.1

[dminkovsky]

It occurred to me to attempt to reproduce this directly from with-styled-components. Turns out that using a direct fork of canary, on which styled components is at version 4, this problem does not exist.

However, when I upgraded the example to version five, the problem appeared: https://github.com/dminkovsky/next.js/commit/6f9dd40025fe8024a2b8854f90810c7fc975b2db. I will review the latest docs for server rendering and see if something different has to be done in _document.js.

Update

Reviewed the styled components SSR docs. Not seeing anything different for v5. I opened an issue in styled-components: https://github.com/styled-components/styled-components/issues/3026.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.