@emotion/react version

While using [email protected] and @chakra-ui/[email protected] warning shows in devtools saying that 2 different versions of @emotion/react were used.

Would be awesome if it was a peer dependency or just bump it to the newer version.

Screenshots from yarn.lock

I've received a similar error:

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.

I am using only @emotion/react 11.11.0, so I do not think it has to do with including two separate versions. I suspect there is something about how react-select is using @emotion/react that is causing this. I first saw this error in February when I first integrated react-select 5.7.0 into my project, and continue to see it with react-select 5.7.3.

My application is using react-scripts 5.0.1 with Create React App to configure the app.

❯ yarn why @emotion/react
yarn why v1.22.19
[...]
=> Found "@emotion/[email protected]"
info Reasons this module exists
   - "_project_#workspace" depends on it
   - Hoisted from "_project_#workspace#@emotion#react"
   - Hoisted from "_project_#workspace#react-select#@emotion#react"
[...]

❯ yarn why react-select
yarn why v1.22.19
[...]
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#workspace" depends on it
   - Hoisted from "_project_#workspace#react-select"
[...]

It seems that the dependence of react-select in yarn.lock is incorrect. @emotion/react should be set to peer dependencies. I forced the emotion/react version to resolution on package.json. I'm not sure if this is the right way, but after many attempts, the warning disappeared.

From an Emotion maintainer: "The real problem is in the react-select package - they shouldn't specify Emotion as a regular dependency, it should be a peer."

https://github.com/emotion-js/emotion/discussions/2795#discussioncomment-3031431

Is this issue being addressed? I just added react-select to my project and started seeing the warning below. I use npm rather than yarn.

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.

I tried every possible "solution" that was mentioned in the github thread here and nothing worked.