React.NET
React.NET copied to clipboard
reactjs
Styled-components SSR not working with new SC version
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.
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 [email protected] 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 .
@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
@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.