When using React Material-UI and Emotion in a Mono-Repo (PNPM) Emotion is included two times

[swernerx]

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.

[swernerx]

When adding a debug console.log to the bundles of @emotion/react it seems that the ESM bundle is loaded two times:

@emotion_react.js?v=f88aff20:340 Emotion Browser-ESM
@mui_material.js?v=e7f1b82a:1653 Emotion Browser-ESM
@mui_material.js?v=e7f1b82a:1655 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.

1. standalone as it is used by the actual application
2. pre-bundled as it is used by a dependency of @mui/material

[swernerx]

The issue seems to be related to dev-mode only. In the production build + vite preview everything works fine.

[hengwangsay]

same issue for me

[ArnaudBarre]

This bug still happen with the latest version of Vite. @patak-dev I think this bug should go back to Vite core repo, it seems to be an issue with how pre-bundling works.

Another workaround I found is to make the main app explicitly depend on @mui/material and add this to the config:
include: ['@mui/material'],

[ArnaudBarre]

Hi! Bumping all dependencies to latest and restating the lockfile from scratch solve the issue. The bug is really sensitive to the fact that you can have a mismatch of emotion versions between the uikit and your app. Maybe having only one version in the workspace could make this more stable.

If you still find yourself having issues with this, I suggest you open create a new issue into the core repo