Describe the bug

In my set-up two variants of the same @emotion/react (identical version, different module format) library are sent over to the browser.

I created a small showcase for the issue here: https://github.com/swernerx/emotion-react-vite-issue

Seems to be related to the situation that Emotion is being used as a direct and indirect dependency inside a (pnpm-powered) mono-repository set-up. In the case of @emotion/react either both the CJS and the ESM version or two ESM bundles are sent to the browser. The library contains a check to warn about a duplicate import situation, which made us aware of the problem. There might be other libraries/use-cases where the same issue applies.

Reproduction

https://github.com/swernerx/emotion-react-vite-issue

System Info

System:
    OS: macOS 12.5
    CPU: (20) arm64 Apple M1 Ultra
    Memory: 2.30 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /opt/homebrew/opt/node@16/bin/node
    npm: 8.11.0 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Brave Browser: 103.1.40.105
    Chrome: 104.0.5112.79
    Firefox: 98.0.2
    Safari: 15.6

Used Package Manager

pnpm

Logs

emotion-react.browser.esm.js:398 You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.