React Monorepo: You are loading @emotion/react when it is already loaded

Current behavior:

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.

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. I can't be sure if this is issue with ViteJs or with @emotion. But I did notice that this does not happen with Create React Scripts. Maybe @emotion needs some additional config in ViteJs?

To reproduce:

https://github.com/paradox37/monorepo

Expected behavior:

It should not show a message about multiple instance and it should apply variables.

Environment information:

react ^18.2.0
@emotion/react: ^11.10.0
@emotion/react": "^11.10.0,

emotion-js / emotion

React Monorepo: You are loading @emotion/react when it is already loaded #2958