@emotion/css error 에러 in React - you have tried to stringify object returned from css function

error message 

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.

 

You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).

 

 

📌 문제 상황

codesandbox에서 emotion/css를 사용할 때 error 발생

css 에 전달하는 객체가 문자열로 변환해서 전달되야 되는데 그대로 전달되었다는 메세지

 

사실 emotion/css 프로젝트를 사용하려면 babel 설정이 필요한데, (아래링크 참조) codesandbox에서 설정이 안되어 있어서 그런 모양이었다.  

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

 

 

 

 

📌 해결 방법

근데 이런거 일일히 설정하기도 귀찮으니  sample에서는 jsx 파일 최상단에 아래 주석을 추가해주자

/** @jsxImportSource @emotion/react */

 

 

 

추가로 emotoin/css의 사용법에 대한 링크 도 남깁니다.

 

📌 참고 링크

🔗 Error Using @emotion/core in my React app

Error Using @emotion/core in my React app

🔗 CSS Emotion Library - Getting css props error when using css prop

CSS Emotion Library - Getting css props error when using css prop