Getting the console warning: You are loading @emotion/react when it is already loaded.

[davidslaby]

Hello, I'm getting warning:

vendor.js:53759 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.
../../../node_modules/react-select/node_modules/@emotion/react/dist/emotion-react.browser.esm.js @ vendor.js:53759

Has anyone reproduced the same bug? Any solution?

Thanks in advance :)

[Methuselah96]

Looks like you have multiple instances of @emotion/react in your node_modules directory (based on the fact that the error is coming from the node_modules directory nested within react-select). What version of Emotion are you using in your app? Can you try deleting your lock file and reinstalling your dependencies to see if the two installed Emotion versions can be hoisted and combined into the same version?

[davidslaby]

Hi Nathan, thanks for reply. I have tried and still the same problem.

[Methuselah96]

Can you add a caret to the beginning of the version for @emotion/react and @emotion/styled, delete your node_modules and lock file, and reinstall your packages?

[davidslaby]

Solved. Thanks a lot!

[zedrdave]

Hi,

I am still encountering this problem with the latest version of react-select. I tried removing any possible conflicting module, deleted node_module and yarn.lock, and still getting:

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.

Relevant parts of yarn.lock (and only places @emotion/react appears):

"@emotion/react@^11.1.1":
  version "11.4.1"
  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57"
  integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@emotion/cache" "^11.4.0"
    "@emotion/serialize" "^1.0.2"
    "@emotion/sheet" "^1.0.2"
    "@emotion/utils" "^1.0.0"
    "@emotion/weak-memoize" "^0.2.5"
    hoist-non-react-statics "^3.3.1"

[...]

react-select@^4.3.1:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
  dependencies:
    "@babel/runtime" "^7.12.0"
    "@emotion/cache" "^11.4.0"
    "@emotion/react" "^11.1.1"
    memoize-one "^5.0.0"
    prop-types "^15.6.0"
    react-input-autosize "^3.0.0"
    react-transition-group "^4.3.0"

[Methuselah96]

Can you try deleting one of those entries in the yarn.lock? It's odd that you have a duplicate entry.

[zedrdave]

Sorry! Typo when copy-pasting: there is no duplicate. I fixed it in the comment above…

[Methuselah96]

What package manager are you using? Are you using Yarn PnP by chance? (Edit: looks like you're on Yarn 1 based on your yarn.lock)

[zedrdave]

Using regular vanilla Yarn, not pnp.

[zedrdave]

From looking both at the lock file and node_module dir, it seems like there is only one version of @emotion/react installed (11.4.1)… So I really don't understand how it can manage to load two versions.

[Methuselah96]

Are you using Webpack? Can you build your app and search through the built JS bundles to see if it's being included more than once for some reason?

[zedrdave]

I'm using Create React App with Webpack underneath. I can build, the bundles, but not sure how I would go about checking whether that particular package is included twice… :-/

[Methuselah96]

Just CTRL-F in the bundles for @emotion/react. It should show up in comment blocks above each bundled module.

[zedrdave]

I looked through the .map files and afaict, there is only that one version of @emotion/react (directly under node_modules) appearing… No other nested version or anything.

[Methuselah96]

The .map files are just the source maps not the actual bundled JS. Can you take a look at the .js files?

If it seems like there are no duplicates I don't have any other things to tell you to try besides trying to reproduce it in a public repo so that I can take a look at it more in-depth.

[zedrdave]

I did look at the .js files before, and the string @emotion/react does not appear anywhere…
I will try and produce a replicable case as soon as I have a minute…

[123fhhh]

Can I ask the same problem? Sorry, My English is not good, I'm getting warning:
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.