CRA React 프로젝트에 StoryBook 설치 오류 해결방법과 원인분석

에러 발생

eunhee@ieunhuiui-MacBookPro client % pm run storybook
> client@0.1.0 storybook
> storybook dev -p 6006
error: unknown option '-p'

개인프로젝트에 storybook 을 설치하고 처음으로 작동하는 과정에서 npm run storybook 시 error: unknown option '-p' 라는 에러가 떴습니다. 오류: 알 수 없는 옵션 '-p'라며 해당 스토리북을 발견하지 못하고 종료된 모습입니다. package.json 의존성에 storybook 6버전이 설치되어있는 것을 확인했습니다.  

에러 해결 시도

설치가 안되었다는 가정하에 sudo npx storybook@lastest init 을 시도했습니다. 그러나  package.json 의존성에 storybook 버전업이 진행되지 않았습니다. 그래서 설치되어있으나 어떤 모종의 이유로 잘못 설치되어 동작하지 않는다라고 판단했습니다. 그래서 기존 설치된 storybook 을 삭제하기 위해 sudo npm uninstall storybook을 했으나 삭제가 되지 않았습니다.  

원인: ERESOLVE overriding peer dependency 경고= 종속성 피어 종속성의 예상 버전 간에 충돌

0. 프레임워크내 스토리북 설치와 이중설치문제

해당 에러를 만나기 이전 과정에서 스토리북을 프로젝트 내부에 있는 client 폴더 내부(  Create React App 이 설치되어 있음)에 하나, 또 폴더 외부에 하나 이중으로 설치를 잘못했었습니다. 스토리북은 이미 프레임워크가 설정된 프로젝트에 설치해야 했기 때문에  밖에 설치된 storybook는 잘못된 설치였고  client 폴더 외부에 있던 storybook관련 파일들은  sudo rm -r  파일명   명령어를 통해 강제 삭제 했습니다.

1. Scripts에 알맞는 cli 유틸리티 작성

client 폴더 내부에 storybook을 설치했을 당시 npx storybook init  명령어가 아닌 npm storybook@버전명 과같은 명령어로 설치했을 것이라 예상됩니다.  그래서 최신 버전,7버전이 아닌 6버전이 설치된것이 아닐까 예측됩니다. 여기서 주목할 점은 스토리북은 시작 스토리북과 빌드 스토리북의 두 가지 CLI 유틸리티와 함께 제공됩니다.  그래서  6버전을 설치했으나 오류 수정하는 과정 중  package.json 안 scripts에 버전에 맞지 않는 CLI 유틸리티로 변경하여 문제가 해결되지 않았던 것으로 생각합니다. 그래서 package.json 안 scripts에 버전에 알맞게 작성후 npm run storybook을 시도했으나 여전히 문제가 발생했습니다. (아마 당시 한 가지 CLI 유틸리티 "storybook": start-storybook 만 변경해 제대로 동작하지 않았나 추측합니다. 근데 그건 스토리북을 실행할 때랑은 별개로 상관없지 않을까..)

[6.0버전 경우]

start-storybook

Usage: start-storybook [options]

build-storybook

Usage:build-storybook  [options]

 

[7버전 경우](latest)

dev

storybook dev [options]

build

storybook build [options]

 

잘못된 package.json 파일

package.json 안 Scripts에 알맞는 cli 유틸리티 작성.했으나 실패

 

2. ERESOLVE overriding peer dependency 경고를 무시한  storybook 버전 6.0 강제 설치

빈프로젝트에 해당 오류에 대한 시물레이션하며 원인 파악을 시도했습니다. cra 가 설치된 폴더 내에 storybook 버전 6.0을 설치했더니 경고창이 뜨며 설치가 되지 않았습니다. 추측하건데 아마 이 경고창을 제대로 살펴보지 않고 sudo npm install @storybook/react@6.0.0을 통해 강제 설치해서 문제가 발생한것이라 예상됩니다. 이 ERESOLVE overriding peer dependency 경고는 종속성 피어 종속성의 예상 버전 간에 충돌이 있음을 나타냅니다. 따라서 패키지를 최신버전으로 업데이트해야 합니다.

1. npm WARN ERESOLVE *피어 종속성 재정의 이 경고는 종속성 피어 종속성의 예상 버전 간에 충돌이 있음을 나타냅니다. 이것은 하나 이상의 패키지가 서로 다른 버전의 동일한 피어 종속성을 필요로 하며 npm이 예상 버전을 재정의하여 이 충돌을 해결하려고 시도함을 의미합니다.
2. npm WARN deprecated 이러한 경고는 사용 중인 특정 패키지 또는 종속성이 더 이상 사용되지 않음을 알려줍니다. 더 이상 사용되지 않는 패키지는 더 이상 적극적으로 유지 관리되지 않으며 버그 또는 보안 취약성을 포함할 수 있습니다. 이러한 패키지를 최신 버전으로 업데이트하거나 대체 솔루션을 찾는 것이 좋습니다.

ERESOLVE overriding peer dependency 경고

해결:  프로젝트의 업그레이드 npx storybook@latest upgrade

명령어 npx storybook@latest upgrade 로 7버전으로 업그레이드 시켜 이를 해결했습니다. 

회고

배운 점.

• 이전 과정에서 스토리북을 client 폴더 내부, 외부 이중으로 설치한 문제가 있었습니다. client 내부에 react가 설치되어있기 때문에 폴더 외부에 설치된 스토리북 관련 파일을 삭제하려 시도했습니다. 그러나 퍼미션 에러 Permission denied 권한 거부가 뜨며 설치를 실패했습니다. 그래서 터미널에 sudo rm -r  파일명   으로 명령어를 통해 삭제하는 것을 배웠습니다.
• 패키지 설치와 실행중 문제가 발생했을 때는 캠프가 제공해준 설치가이드만 보는 것에 그치지 말고  해당 패키지의 공식 migration guide를 찾아보고 공부하는 해야 함을 배웠습니다. 
• Peer Dependencies  피어 종속성 란 ->다음 블로깅
•  npx storybook@latest upgrade 와 npx storybook@latest init   ->다음 블로깅

Storybook이 이미 사용중인 프로젝트의 업그레이드 npx storybook@latest upgrade 를,

사용중이지 않은 프로젝트에 Storybook 적용 npx storybook@latest init 를,

깨달은 점.

• 에러를 해결하는 데만 급급하여 gpt 가 제시해주는 해결법을 완전히 이해하지 못한 채로 시도한 문제가 있었습니다. 그래서  중간에 2차 오류가 생겨나면 그에 대한 원인 분석을 하지 못하고 스트레스만 받고 에너지가 고갈되었습니다.  해당 패키지를 익히는 것도 공부지만 중간중간 만나는 에러또한 중요한 공부라는 것을 계속 상기시켜야 겠다 다짐했습니다. 그리고 당연히 안다고 생각하는 명령어들도 스스로에게 계속 정의를 질문하는 과정을 통해 자기객관화하는 연습이 필요하다 느꼈습니다. 
• 불투명한 미래에 대한 두려움보다 당일 스스로가 성장한 부분에 집중하기 위해 부족하지만 하루동안 배운 자잘한 부분을 블로깅하는 습관을 길러야 겠다 생각했습니다.
• 블로그에서 해결하라는 제시법들을 이것저것 와라락 작성하기 보다 차근차근 어떤 부분에서 원인이 생겼는 지 분석하고 공부하는 자세 길러야 겠다 생각했습니다. 

출처

https://storybook.js.org/docs/react/migration-guide

Migration guide for Storybook 7.0

https://storybook.js.org/docs/6.0/react/api/cli-options

CLI options

https://storybook.js.org/docs/react/api/cli-options

CLI options