[해결] 2022-04-03 CRA로 Chakra UI 매뉴얼 세팅했을 때 오류 발생하는 이슈

CRA with NPM/TypeScript failing · Issue #5804 · chakra-ui/chakra-ui

Cra template project can't work · Issue #5803 · chakra-ui/chakra-ui

2022년 4월 2일경부터 Create React App을 이용해 프로젝트 세팅을 하고, Chakra UI Manual Installation 과정을 거치면 오류가 발생하고 있다. 관련해서 2개의 이슈가 보고된 상태이다.

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

 

애초에 CRA 템플릿으로 프로젝트를 생성하던 중에 오류가 발생하기도 하고, 생성은 정상적으로 되었는데 이후 실행하는 과정에서 JS/TS 오류가 발생하기도 하는 것 같다. 

 

 

오류 Message : 

Uncaught TypeError: framer_motion_WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function

 

 

framer-motion 관련해서 충돌이 발생한 것으로 보이는데 아래 방법으로 해결할 수 있다고 한다. Typescript 버전에서는 정상적으로 작동한다고 하는데, 본인은 자바스크립트로 이용 중이라 해당 방법으로 해결되지는 않았다.

 

yarn remove framer-motion
yarn add framer-motion@3.10.6
yarn start

 

---

(2022-04-05 추가) 임시방편이지만 해결책이 제시되었다.

https://github.com/chakra-ui/chakra-ui/issues/5812#issuecomment-1088419675

Seems like framer-motion fallback does not work with webpack 5 · Issue #5812 · chakra-ui/chakra-ui

 

package.json 에서 react-scripts에 포함된 webpack의 버전을 수정하면 된다고 한다.

 

---

(2022-04-08 추가) 공식 업데이트 Release

Chakra-ui 1.8.8 버전이 공식 Release되며 Create React App Template에서 발생하는 framer-motion 이슈가 수정되었다.