Emotion: Issue when using CacheProvider in Gatsby (SSR)

[kombucha]

Current behavior:

I'm building a gatsby website with emotion. I have a custom ui library with a wrapper that looks something like this:

const MyWrapper = ({ children, key = "stl" }) => {
  const myCache = createCache({ key })
  // I also have a custom container setup and some global styles but this is enough to reproduce the issue
  return <CacheProvider value={myCache}>{children}</CacheProvider>
}

With the follow landing page on my gatsby application:

  <MyWrapper>
    <div
      css={css`
        color: green;
      `}
    >
      Hello world!
    </div>
  </MyWrapper>

I get the following error when I use the built version of the application:

If you disable javascript, the page loads and looks fine so I'm guessing something is going wrong when rehydrating. It looks like it's happening in react-dom so I don't think it's related to gatsby. Feel free to close the issue if you think otherwise.

Maybe related: https://github.com/emotion-js/emotion/pull/1396

Thank you for your help 🙏

To reproduce:

1. git clone https://github.com/kombucha/gatsby-emotion-bug.git
2. yarn
3. yarn serve (this will build and serve the gatsby website, ie not development mode)
4. Go to http://localhost:9000/. You should see an error.

Expected behavior:

It should rehydrate the application without error.

Environment information:

• react version: 16.9
• emotion version: 10.0.15
• gatsby-plugin-emotion version: 4.1.2

[Andarist]

@kombucha thanks for repro case! This has allowed me to recognize the problem and prepare a possible fix - https://github.com/emotion-js/emotion/pull/1572 . We still need to figure out how to merge this, but we are on a good way.

[Andarist]

We have to postpone fixing this until v11 hits stable - I'm dedicated to working on it right now and it won't contain many breaking changes, so hopefully in a couple of weeks this will get fixed

[kombucha]

Awesome news @Andarist !
Thank you so much :)

[zslabs]

👋 Not sure if it's appropriate to add a new issue or not, but seems related to hydration issues similar to this one. I've noticed when using these docs I'm seeing some odd "double-loading" on https://zslabs.com/experience https://github.com/zslabs/zslabs.com where quick "hard refreshes" will show a small "blip" on the screen of the CSS code behind it; which I'm concerned may mean the cache from gatsby-ssr is different than that of gatsby-browser and causing the things to appear invalid.

[Andarist]

@zslabs you have such style generated:

.ck-1iz4joc > * > * {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.175,0.885,0.320,1.275);
    transform-origin: center center;
    backface-visibility: hidden;
}

and it's applied to at least one of the <style> elements before we have a chance to move them out of the way (when JS loads and executes). I would recommend writing more specific css for this one or you could try to set style { display: none !important; } globally.

[Andarist]

A fix for this has been merged in: https://github.com/emotion-js/emotion/pull/1572 . It will be a part of our upcoming v11 release.

[Andarist]

Closing because the fix for it has been merged, we hope to release v11 soon-ish.