Dual package issue with Emotion 11.13

[garronej]

Hello,

I previously reported a similar issue using this reproduction repo, which was resolved by @Andarist via a PR to Vite.

However, the issue has resurfaced with Emotion 11.13 with the introduction of the "development" resolution condition.

Let’s consider a module, a-module-that-uses-emotion, which imports @emotion/react, and assume the app itself also imports @emotion/react.

In development mode, with Vike, during server-side rendering, a-module-that-uses-emotion imports @emotion/react using the exports["."].default condition, while the app’s direct import of @emotion/react uses the exports["."].development.default condition.

To help reproduce the issue, I’ve prepared a repository:

https://github.com/garronej/vike-dual-package-repo-repo

Apologies for dropping such a complex issue on your plate, and thank you in advance for taking the time to review this.

Best regards,

REF: garronej/tss-react#218

[Andarist]

Is this the correct repro? It's the same one as the one you mention at the beginning of your issue and the last commit there was a year ago. I also rechecked that it's using Vite 4.3.9 - before my fix was merged and released. I patched it locally with my fix and confirmed that it resolves the issue in this repo.

[garronej]

@Andarist I'm so sorry I linked the wrong reproduction repo !!!

https://github.com/garronej/vike-dual-package-repo-repo

[Andarist]

I think the issue here is that during SSR Vike picks up the non-development build because they just let node resolve modules (which is fine). I think they should configure the appropriate conditions for you automatically - that's something to be raised in Vike's issue tracker. Otherwise, they are creating an inconsistent environment when the server and the bundled files can use different sets of files.

As a temporary workaround, you can start your dev server like this

node --loader ts-node/esm --conditions=development ./server/index.ts

[garronej]

Thank you for figuring this out so quicly @Andarist!
I've openned an issue on vike's repo.

I'll make sure to close this as soon as it's resolved

[oleksandr-danylchenko]

I faced a similar issue using a regular vite + @vitejs/plugin-react.

I have a library that uses @emotion/react for the styling with the theme.
I declare the ThemeProvider in my app, but the library doesn't pick any of those styles!

Wondering through the sources I found that in-app @emotion/react reads from the emotion-element-7a1343fa.browser.development.esm.js and uses its ThemeProvider + ThemeContext.
However, the library, when serialized the styles, was reading from the emotion-element-b4c8b265.esm.js! Expectedly, the latter has an empty ThemeContext and fails to apply the styles.

---

UPD: The issue turned out to appear due to using an old Vite: 2.9.x version! After I switched to the latest ^6.0.1 the app started working properly and I saw no duplicates.