Emotion 10 + Emotion 11 side-by-side problems

Current behavior:

I’m currently attempting an upgrade of our codebase to Emotion 11 and it’s proving extremely problematic as we have a variety of things that still require Emotion 10. (e.g. storybook). So I have a node_modules folder that contains both Emotion 10 and Emotion 11.

There are some TypeScript issues (specifically the dreaded TS2742 error) which I won’t list here but the most significant problem I’m having right now is with the versioning of the @emotion/serialize package: the Emotion 10 version of this package has a higher version number than the Emotion 11 version and so is picked up by @emotion/react of Emotion 11.

To reproduce:

1. Create a lerna repo and install storybook at the top level. That uses Emotion 10
2. Create a subpackage that uses Emotion 11’s @emotion/react package.
3. Try to use the Emotion 11 package; it won’t work because it picks up @emotion/serialize@0.11.16 from Emotion 10, used by storybook.

The problem is that @emotion/react@11.0.0-next.14 has a dependency on ^0.11.15-next.2. That dependency will be satisfied by @emotion/serialize@0.11.16

Expected behavior:

If Emotion 11 packages require other Emotion 11 packages, they should be picking them up, not accidentally picking up Emotion 10 packages.

[Andarist]

I’ve given the answer to @levymetal’s issue here: https://github.com/storybookjs/storybook/pull/13300#issuecomment-963095193

[levymetal]

I’m getting a similar issue with a project that uses Emotion 11 and Storybook 6 (which uses Emotion 10). @emotion/sheet@0.9.4 from @storybook#theming#@emotion#core#@emotion#cache gets hoisted to @emotion/sheet, and Emotion 11 pulls that instead of @emotion/sheet@^1.0.3 throwing a TypeError: cache.sheet.hydrate is not a function. Manually adding @emotion/sheet@^1.0.3 to the package hoists it to @emotion/sheet.

This only happens with yarn and not npm. However, I don’t understand why Emotion 11 breaks with this hoisting strategy; I don’t understand why it’s pulling sheet from the root instead of its own deps. The node_modules dir in @emotion/react contains the correct version of sheet.

I’ve created a repro here: https://github.com/levymetal/emotion-11-conflict-repro. Running yarn start throws the TypeError above. Removing @storybook/react or adding @emotion/sheet@^1.0.3 fixes the issue.