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

[ellen-localley]

Hi, I'm already using emotion in my app. This warning has appeared when the module was installed and runned.

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. emotion-react.browser.esm.js:353 _./node_modules/react-spinners/nodemodules/@emotion/react/dist/emotion-react.browser.esm.js @ emotion-react.browser.esm.js:353

package.json

  "@emotion/react": "11.7.1",
  "@emotion/styled": "11.6.0",
...
  "@babel/plugin-transform-react-jsx": "7.17.3",
  "@babel/preset-env": "7.16.11",
  "@emotion/babel-plugin-jsx-pragmatic": "0.1.5",

.babelrc

{
    "presets": ["@babel/preset-react", "@babel/preset-env"],
    "plugins": [
     [
         "@emotion/babel-plugin-jsx-pragmatic",
         {
           "export": "jsx",
           "import": "__to_avoid_prepending_/** @jsxImportSource @emotion/react */",
           "module": "@emotion/react"
         }
       ],
       [
         "@babel/plugin-transform-react-jsx",
         {
           "pragma": "__to_avoid_prepending_/** @jsxImportSource @emotion/react */"
         }
       ]
    ]
}

tsconfig.json

...
  "jsxImportSource": "@emotion/react",
...

and my component is like that:

import SyncLoader from 'react-spinners/SyncLoader';

export const DataLoading = () => {
    return <SyncLoader size={5} />;
};

Can I solve this problem?

[davidhu2000]

i think i need to move emotion to peerDeps instead of deps

[davidhu2000]

altho that can cause issues with existing users. Need to think of a way to get rid of emotion as a dependency

[davidhu2000]

going to merge this with #208