Loading a second emotion bundle shouldn't break the first

Current behavior:

I’m trying to run emotion 11 in a browser extension content script. The trouble is if that content script then runs in a page that is already running an emotion 11 app, then the app styles break. After a chat with @Andarist on the emotion-slack, he suggested I open an issue here and that this is probably the culprit: https://github.com/emotion-js/emotion/blob/1e10d8c9aa91ce443d29661a7f830190d42aae92/packages/cache/src/index.js#L55-L60

To reproduce:

1. Build and install a browser extension that uses emotion 11 in a content script (I’ve made a test extension here: https://github.com/craigsketchley/emotion-11-extension).
2. Visit a page that uses emotion 11 in production mode (I’ve made a test app here: https://github.com/craigsketchley/emotion-11-app).
3. Watch styles break as soon as the content script loads.

Expected behavior:

Loading a second bundle which includes emotion 11 shouldn’t break the styles of the existing emotion 11 app already running in the page.

Environment information:

In the app and extension:

• react version: 16.13.1
• @emotion/cache version: 11.0.0-next.13
• @emotion/react version: 11.0.0-next.13
• @emotion/styled version: 11.0.0-next.13

[Andarist]

I finally got to it and prepared a PR for this, you can track it here: https://github.com/emotion-js/emotion/pull/2028

[arturbien]

@Andarist sorry for the false alarm. I have a project inside a monorepo with multiple yarn workspaces and packages, and somehow the webpack bundled older version of /styled and /react package from the root folder causing the issue. Running “yarn upgrade” in the root of the repo and then in the extension workspace solved the problem