Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 😃

Issue Analytics

State:
Created 2 years ago
Comments:17

Top GitHub Comments

1reaction

zedrdavecommented, Sep 23, 2021

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…

1reaction

zedrdavecommented, Sep 23, 2021

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"

Top Results From Across the Web

You are loading @emotion/react when it is already ... - GitHub

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, ......

React: does not match the corresponding name on disk/ emotion

tsx Cannot find file: 'emotion-react.browser.esm.js' does not match the corresponding name on disk: 'C:\Users\gabrielti\Documents\emasa- ...

Reactjs — Emotion For Styling Components | by Avery Duffin

This brought about the idea of separation of concerns bring styling out of html and putting it in stylesheets that could be loaded...

Configure Storybook

By default, Storybook will load stories from your project based on a glob (pattern matching string) in .storybook/main.js that matches all files in...

FAQs - styled-components

Why am I getting a warning about several instances of module on the page? ... If you are seeing a warning message in...