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: #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