Frontend

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

HAENU 2022. 4. 3. 09:24
반응형

 

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

Description When I run the "TypeScript using npm" command found here I am getting errors in my terminal and the command exits before completing. Link to Reproduction This happens in the t...

github.com

 

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

Description Can't run the cra typescript template, Steps to reproduce Create a new cra typescript template (npx create-react-app my-app --template @chakra-ui/typescript) npm run start Get the w...

github.com

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

I have a pretty complex monorepo which I now just got working with Yarn 3 workspaces, webpack 5, craco and react-scripts. It's been an absolute nightmare so far and when I though I got it worki...

github.com

 

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

 

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

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

반응형