<aside> 💡 스토리북을 설치하고 react앱을 실행할 때 마주하는 에러해결을 정리했습니다. -유노

</aside>

React + Storybook 의 종속성 문제

참고

Storybook을 설치한 이후 yarn start 명령어로 React를 실행 했을 때 아래와 같은 에러가 발생한다.

원인은 babel-loader 패키지의 버전이 react-scripts의 경우 8.1.0을 사용하는 반면, Storybook은 8.2.2를 사용하기 때문이다.

해결

package.json에서 아래와 같이 resolutions의 속성을 통해 패키지의 하위 패키지 버전을 선택하면 된다.

// package.json

...
"resolutions": {
 "babel-loader": 8.1.0 // react-scripts에서 요구하는 버전
}
...

추가 하고나서 package-lock.json, yarn.lock, node_modules를 삭제하고 yarn install 명령어로 다시 설치해준 뒤 yarn start와 yarn storybook을 실행하면 스토리북과 리액트 모두 잘된다.