Emotion 10 & SSR rendering

[tadeuszwojcik]

• emotion version: 10 (@emotion/core": "^0.13.0")
• react version: 16.4.2

Hi,

I'm trying to use emotion 10 (@emotion/core & @emotion/styled-base) for a project, it works great client-side, but not sure how to tackle server side rendering.

It's supposed to be working out of the box, but for me it doesn't and I'm not 100% why. I've tracked it down to @emotion/utils and insertStyles function that returns nothing and should be returning joinedRules. It appears that context is caching those rules globally on the server so check context.inserted[insertable.name] === undefined returns false, except for the first call. It could be something wrong with my project setup as well, can't exclude that.
Anyways even if I set that condition to true and styles get rendered, all of them get rendered inline before component for every component. That get's really problematic when I have lists of components then styles are duplicated for each of them. Not sure if it's supposed to work that way or it's something with my server side code or that this condition can't be set to be true always.
What I'd like to know is if 'out-of-the-box' server side rendering of emotion is supposed to insert duplicated styles definition to resulting html or not as it would be kind of deal breaker for me.
Thanks!

[emmatown]

Could you provide a reproduction or at least more details about your setup?

[tadeuszwojcik]

Actually, I think the issue is with my server side setup, particularly in call:

import { ApolloProvider, getDataFromTree } from 'react-apollo';
...
await getDataFromTree(markup)

removing getDataFromTree call makes SSR rendering of styles working, but unfortunately I can't do that . It appears that this out-of-the-box method of SSR rendering of styles where assumption is that component render method will be called only once won't work for more complex cases, like with Apollo or whatever lib that uses 'tree walking'. Would having @emotion package that could clear context be possible? Then I could call it just before renderToString ... not sure.

[emmatown]

Could you show all of the code that has the getDataFromTree call, the renderToString call and where you create the element to pass to those functions?

[emmatown]

I've got a reproduction of it, looking into it now.

[tadeuszwojcik]

thanks @mitchellhamilton. Please let me know if you'd need anything.

[emmatown]

This happened because react-apollo's SSR broke the new createContext API, I just submitted a PR to react-apollo to fix it.

I'm gonna close this since it isn't an issue with emotion.

[tadeuszwojcik]

great, thanks!

[tgriesser]

@mitchellhamilton I've been hitting the same issue, glad to see the patch! Quick note on the PR - it looks like you need to sign the meteor CLA before they'll merge it. https://contribute.meteor.com/

[emmatown]

I’ve already signed it :)