Issue when using CacheProvider in Gatsby (SSR)

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]

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

[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.