search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.51k stars 1.11k forks source link

Dual package issue with Emotion 11.13 #3267

Open garronej opened 1 month ago

garronej commented 1 month ago

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: https://github.com/garronej/tss-react/discussions/218

Andarist commented 1 month ago

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 commented 1 month ago

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

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

Andarist commented 1 month ago

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 commented 1 month ago

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