React 프로젝트에서 Storybook 설치 시, 프로젝트 실행이 안된다면?

제목 그대로 storybook을 만져보다가 프로젝트 실행을 하였는데, 아래와 같이 오류를 만나게 되었다.

 

스토리북 도입하면서 프로젝트 실행할 일이 없어서 계속 모르고 있었다. 커밋로그 상으로 언제부터 에러가 난 건지 한참 찾아봤었고, Storybook CLI인 npx sb init를 하고 난 이후로 프로젝트 실행이 되지 않는 것을 확인했다.

 

이슈 찾기

아래의 링크는 Storybook에서 나와 같은 문제를 겪고있는 이슈이다.

https://github.com/storybookjs/storybook/issues/5183

babel-loader conflicts with create-react-app version · Issue #5183 · storybookjs/storybook

이 문제는 Storybook에서 요구하는 babel loader 버전과 CRA babel-loader 버전이 충돌하여 생긴 문제! 따라서, babel-loader 버전을 8.1.0 으로 낮추면 된다!

 

해결 방법

package.json에 아래와 같은 코드를 추가한다. resolutions는 npm에서 지원하지 않는 기능이므로, yarn 이용자만 사용할 수 있다.

"resolutions": {
        "babel-loader": "8.1.0" 
}

 

resolutions에 대한 내용은 아래 링크를 찾아보면 된다.

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/#toc-limitations-Caveats

Yarn