ViteJs causing problem in react monorepo, @emotion stops working during development

[paradox37]

Describe the bug

I am using monorepo setup, in one folder I have a project, another folder is called shared where I keep components to share between projects. In the project I am using ChakraUI, which uses @emotion package for writing css with js.

In the repo I provided, you can see I have Pagination component in shared folder. When I use color='red.400' it's not recognized as CSS. If I apply that same color in AppWrapper which is inside project1 folder it works.

I can see in console log this warning as soon as I import Pagination component to AppWrapper:
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.

The strange thing is that this only happens when running in Dev mode. Production build does not give any warnings and CSS is applied properly. Also, when using Create React Scripts, this issue is not present, that is why I think this is some bug with ViteJs.

Same issue exists with v3 and v4.

Reproduction

https://github.com/paradox37/monorepo

Steps to reproduce

yarn install
yarn start

Check console and also inspect pagination element, it can be seen that instead of color, plain string is applied, eg 'red.400' instead of #F56565.

No issue in production:

yarn build
yarn preview

System Info

System:
    OS: macOS 12.6.1
    CPU: (8) arm64 Apple M1
    Memory: 81.09 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 107.0.1
    Firefox Developer Edition: 104.0
    Safari: 16.1

Used Package Manager

yarn

Logs

No response

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.

[sapphi-red]

This seems to be a dual package hazard problem.
@ajna/pagination only has a CJS file and other files are ESM.

@emotion/react has a module condition.
https://github.com/emotion-js/emotion/blob/314a5fb08b0f730e7aa88da0c974dfea13cc9b32/packages/react/package.json#L11-L16

Vite only uses module condition for import.

vite/packages/vite/src/node/plugins/resolve.ts

Lines 1102 to 1107 in d617093

	if (
	(!overrideConditions || overrideConditions.has('module')) &&
	!options.isRequire
	) {
	conditions.push('module')
	}

So require will resolve the CJS emotion and import will resolve the ESM emotion.

Given that module condition is proposed as a way to workaround dual package hazard (webpack/webpack#11014, rollup/rollup#3514), I think Vite should replace this !options.isRequire with true.

I'm not sure why it works in prod though.

[MrWangJustToDo]

look like we have a same problem, here is my project https://github.com/MrWangJustToDo/react-ssr-setup

[vicero]

I am hitting the same problem too. This only affects dev mode as well for me, not prod/preview. I am curious if there is a work around.

[Codex-]

I've come across this before with just a single package, it was in a case where a module was loading from the CJS sources while the app was loading from ESM sources. It would emit that loading twice message.

[paradox37]

Are there any workarounds or is the fix coming any time soon? This is preventing me from updating to latest Chakra UI in my project, since I can not work in dev mode. And since this is confirmed bug in Vite, I guess ChakraUI types were not exported properly, and that's why this issue didn't exist before.

[albertoramires]

Running into this issue with @ajna/pagination.

[paradox37]

Since it seems this is not going to be fixed anytime soon, I forked ajna pagination, and exported ESM. Problem solved at least for me. You can get my forked package here: https://www.npmjs.com/package/@paradox37/ajna-pagination

[atrauzzi]

Running into this as well with @emotion/react. Would love to get this message cleaned out of my logs so that I don't have to worry about any subtle breaks.

Is there any kind of workaround? Or better still, a fix?