When using React Material-UI and Emotion in a Mono-Repo (PNPM) Emotion is included two times about vite-plugin-react HOT 5 CLOSED

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

from vite-plugin-react.

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

from vite-plugin-react.

same issue for me

from vite-plugin-react.

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'],

from vite-plugin-react.

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

from vite-plugin-react.