package exports can lead to multiple instances of emotion loaded

[Alphy11]

Current behavior:

Currently, there's an inconsistency in how the package.json files define their exports. For @emotion/react there is an exports field defined, which has "module" and "default". "module" is not a supported field in exports, and so at least Vite will end up importing from exports/default. But, in @emotion/react/jsx-runtime, no exports are defined, so it uses "module" right off the bat.

This leads to a mismatch where the same app loads 2 copies of emotion. The symptom that made me notice this, is that my JSX components were not using the correct emotion cache. Because it is a complete different context instance, and falls back to default values.

To reproduce:

Here's a repro repo. I have merged in the bundled file as well, if you look, you'll see EmotionCacheContext is defined twice (EmotionCacheContext and EmotionCacheContext2)

Expected behavior:

There's a few fixes, that I'll need a maintainer's opinion on where to go with it. I think the easiest is to add an exports section to each sub-package file. I cannot find a ton of context on why those package.json files exist even, the commit introducing them is just a big commit, no MR. So it is hard for me to have a good idea of how to fix them. But if I could gain some context on their purpose, I could come up with some alternative solutions as well.
Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.5

[Andarist]

This sounds awfully like the resolution bug in Vite that I already fixed: vitejs/vite#11259

Could you try with vite@4.1.0-beta.0?

[Alphy11]

That is exactly the cause. Thank you for finding and fixing it before me 💯

[Alphy11]

Though I am curious of what the package file does if it's not supposed to be resolved.

[Andarist]

Those extra package.json files are meant to be resolved by node and bundler versions that do not understand package.json#exports (this is a fairly new addition to the ecosystem after all).