Styled-components SSR not working with new SC version

[felisarmis]

Hello! I'm trying to follow this instruction https://reactjs.net/features/css-in-js.html#styled-components for styled-components SSR. But it works only for styled-components v4.0.0. If I try use the latest version - build failed with "window is undefined" error after import { ServerStyleSheet } from 'styled-components';. Please update SC SSR support.

[dustinsoftware]

Sorry, I don’t have time to investigate a fix for this. It’s likely a problem with SC itself or the webpack configuration. Stick with v4 if you need support.

On Wed, Dec 9, 2020 at 18:54, Felis Armis notifications@github.com wrote:

Hello! I'm trying to follow this instruction https://reactjs.net/features/css-in-js.html#styled-components for styled-components SSR. But it works only for styled-components v4.0.0. If I try use the latest version - build failed with "window is undefined" error after import { ServerStyleSheet } from 'styled-components';. Please update SC SSR support.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/1232, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHGCFQMT3YL6YUH6EYAA73SUAZ5DANCNFSM4UUMEHAA .

[mattywong]

@dustinsoftware i've tracked this issue down to these lines from styled-components:

https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/base.js#L41-L55

Using webpack.DefinePlugin to set process.env.NODE_ENV to "production" fixes the issue as the minifier removes those lines with 'window', and server rendered styles works without changing the StyledComponentsRenderFunction.

Obviously setting NODE_ENV like this isn't an ideal solution as we wouldn't want to set it in development.

I've created an issue in styled-components with a possible fix.

From my own tests, it looks like this issue was introduced in styled-components@>=5.2. Downgrading to 5.1 does not encounter this issue as there is a typeof window !== "undefined" check

[vaclavholusa-LTD]

I can confirm - we are using version 5.1.1 without problems

[mattywong]

@dustinsoftware looks like we might be able to close this and #1207. Styled-components released an update couple months back with styled-components 5.3.1 (https://github.com/styled-components/styled-components/issues/3506) that should address this. I haven't tested it myself however (we have projects still on 5.1.x), but thought I'd give this issue a bump.