search

reactjs / React.NET

.NET library for JSX compilation and server-side rendering of React components
https://reactjs.net/
MIT License
2.3k stars 932 forks source link

Global Styles in styled-components broken in sc 5.x #1207

Open johannesaxner-valtech opened 4 years ago

johannesaxner-valtech commented 4 years ago

In short, everything works fine with styled-components version 4.x, but when we tried upgrading to version 5.x, global styles would not be injected for server-side rendering, only component styles. The symptom is flash of unstyled content until react has loaded and started, in our very visible due to us reseting margins etc in our styled-components global styles.

I'm a front-end developer so not sure about all environment details but the only thing changed between working and not working is bumping the version of styled-components from 4.4.1 to 5.2.0.

Iminrage commented 3 years ago

We've got same problem(

@johannesaxner-valtech Did you solve it somehow?

johannesaxner-valtech commented 3 years ago

No, we've just stayed with styled-components 4.

mattywong commented 3 years ago

Looks like this is a 5.2 issue, introduced from this change:

https://github.com/styled-components/styled-components/commit/f12b943658a9731ab6af6548a780019f696a09cb#diff-da81e98b76a2ff1450584f4cc5c815939012d7d1e067e90b759be54ddf058928L52-R54

downgrading to 5.1.x should resolve this.

Looks like that __SERVER__ boolean variable is set at compile time to create a browser and non-browser dist bundle?. This is sort of related to https://github.com/reactjs/React.NET/issues/1232. Because of this, the useLayoutEffect lines are the one that gets bundled (https://github.com/styled-components/styled-components/blob/f12b943658a9731ab6af6548a780019f696a09cb/packages/styled-components/src/constructors/createGlobalStyle.js#L60-L63).

@dustinsoftware would you have any ideas about the above? I'm thinking perhaps a separate webpack config for server and browser, where server webpack config would have targets: "node" set, but when I tried that the JSEngine isn't able to resolve the modules (complaining about 'export' and 'import' syntax from memory).

I'm happy to create an issue in styled-components repo about this, though I do not understand fully the context of why they have changed this check from typeof window !== "undefined" to __SERVER__ in this commit (https://github.com/styled-components/styled-components/commit/f12b943658a9731ab6af6548a780019f696a09cb)

nuwan-dammika commented 3 years ago

@mattywong did you find a way to solve this issue. Have the same issue. Just got this project to work on and not sure if sticking to 5.1.1 breaks any-other potion of the site. And __SERVER__ is hard-coded in rollup.config.js.

Thanks