ThemeProvider and GlobalStyles in latest version 4

Thought I’d report some findings I’ve had trying to switch to version 4. Love styled-components and hoping this is just me doing something wrong, but just in case I’ll report it here.

I have a server rendered React app using Express + Apollo Server and styled-components. I’ve run into some issues;

• <ThemeProvider /> breaks React Apollo during SSR (queries are not run on the server). They run fine when I remove ThemeProvider (and <GlobalStyles />)
• <GlobalStyles /> needs to be wrapped inside a styled.X component for it to work with HMR / React Hot Loader. If it is moved outside HMR will not work. If <GlobalStyles /> is inside the styled component it reports this error;

"The global style component sc-global-3461151225 was composed and rendered multiple times in your React component tree. Only the last-rendered copy will have its styles remain in "

I downgraded to version 3.4.5 and now queries run as expected again on the server with <ThemeProvider /> and injectGlobal.

Thanks for all the awesome work you do!

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel® Core™ i7-8750H CPU @ 2.20GHz
• Memory: 472.64 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
• npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm

Reproduction

Here’s a repo to illustrate the HMR issue, unfortunately I don’t have Apollo set up there to test the queries; https://github.com/mhaagens/styled_globalstyles_hmr

Steps to reproduce

Wrap <ThemeProvider />around your top level app and use <GlobalStyles /> for global styling.

Expected Behavior

Apollo Queries should run as normal on the server. HMR should work.

Actual Behavior

Apollo Queries stop running on the server. HMR does not work if <GlobalStyles /> isn’t wrapped in a styled component. If it is wrapped HMR works, but it reports errors. Downgrading to 3.4.5 solves the query issue and HMR isn’t supposed to work AFAIK.

[csalmeida]

Thanks @probablyup, I’ve followed the migration guide and using createGlobalStyle worked perfectly.

Also the fact that the guide complements examples with incorrect ones it’s great! 🎉

[probablyup]

Look at the v4 migration guide, that API was replaced… On Mon, Dec 24, 2018 at 11:06 AM cristiano [e-mail] wrote:

I am experiencing a similar issue with injectGlobal with version ^4.1.3 and get the error below. This is fixed when rolling back to 3.4.5 as @mhaagens https://github.com/mhaagens suggested.

Failed to compile

./src/Styles/index.js Attempted import error: ‘injectGlobal’ is not exported from ‘styled-components’.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2158#issuecomment-449755575, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1jMDHroKtDQi1Jsi4kAvDxalnFNxks5u8QmAgaJpZM4X7ApW .