createPortal and emotion in a gatsby site is not working

I am opening this issue as a duplicated one I’ve just posted in gatsby, since I don’t know where it belongs

I think it is a gatsby issue, but I’m opening this one just to be sure

Here https://github.com/gatsbyjs/gatsby/issues/27352 I am using createPortal as seen here

• https://stackoverflow.com/a/34744946/826815 and in the linked codesandbox
• https://codesandbox.io/s/react-iframe-examples-forked-jsn98?file=/src/examples/with-emotion.js

And when embedded in gatsby, it works in gatsby development but not in gatsby build

This happens with and without the @emotion plugins

  "plugins": ["emotion", "@babel/plugin-proposal-class-properties"]

So I’m not sure who is responsible, whether gatsby or emotion 😅

[Andarist]

Oh, I’ve focused on the iframe and not on the main page itself 🤦 The fix is simple - just add a custom key option when creating that custom cache. We’ve already added an error about this in the upcoming Emotion 11: https://github.com/emotion-js/emotion/blob/ff4ee9d1623c2ad15a6ce9fa7a81ee8809683dad/packages/cache/src/index.js#L48-L53

This happens because the development workflow doesn’t use SSR and at the time of cache creation there are no style elements on the page, however when you are using SSR there are already style elements there and because the same default cache key has been used for both the builtin and custom caches they fought over those elements and the second cache created (the custom one) moved those style elements into the iframe and thus removing them from the main page and leaving it unstyled.

[1-800-jono]

How to add a custom key option?