[Error] @emotion/react useInsertionEffect 참조 에러

 

 

 

항상 css-in-js로 styled-components만 사용하다가 emotion을 써보고 싶어서 라이브러리를 설치했다.

 

emotion에서도 styled-components와 동일하게 GlobalStyle과 ThemeProvider API를 제공하고 있어서 우선 theme과 global 파일을 생성하여 간단한 설정을 마친 후 index.js에 임포트하였다. 그런데 임포트 하자마자 아래와 같이 export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' 라는 문구와 함께 에러가 발생했다.

 

 

'useInsertionEffect'라는 API가 export 할 수 있는 API 리스트에 없어서 발생하는 문제인 듯 하였고, 찾아보니 원래는 import문을 쓸 때 React['useInsertion' + 'Effect'] 의 형태로 참조해야 하는데, React.useInsertionEffect로 직접적으로 참조하는 버그 때문에 발생하는 거라고 한다.

 

@emotion/react의 11.8.0 에서만 발생하는 문제로, 11.8.1 로 업그레이드 하거나 11.7.1 로 다운그레이드 하면 더이상 에러가 발생하지 않는다. 나는 11.8.1로 업그레이드해서 현재 GlobalStyle과 ThemeProvider가 전달해주는 theme 모두 문제 없이 잘 적용되고 있다!

 

// 11.8.1로 업그레이드
npm install @emotion/react@11.8.1
yarn add @emotion/react@11.8.1

// 11.7.1로 다운그레이드
npm install @emotion/react@11.7.1
yarn add @emotion/react@11.7.1