이슈가 발생한 환경
yarn 버전 : 1.22.19
storybook 버전 : 7.6.6
설명
처음에 스토리북을 설치할 때, 프로젝트 빌드 도구로 vite를 사용하고 있었기 때문에, storybook에서도 통일하고자 vite로 빌더를 지정해 다음과 같이 설치했다.
빌더를 지정하지 않는 경우 기본적으로 webpack5를 빌더로 설치한다고 한다.
storybook builders
npx storybook@latest init --builder vite그런데, 스토리북을 실행하니까 다음과 같이 오류가 발생했다.
사진에서 관련 이슈를 링크해둬서 들어가보니까, storybook에 포함된 의존성 패키지중 jackspeak이 2.1.2 버전이상으로 업데이트되면서 yarn v1과 하위 호환성이 사라졌다고 한다.
jackspeak 라이브러리를 설치한적이 없는데, node_modules에서 해당 라이브러리가 설치된 것을 찾아볼 수 있었다.
이는, npm과 yarn v1로 라이브러리를 설치했을때, node_modules 디렉토리 구조를 어떻게 형성하는지를 살펴보면 답을 찾을 수 있었다.
npm 및 yarn v1에서는 node_modules의 크기를 최소화하기 위해 여러 라이브러리내에서 사용되는 의존성 패키지를 상위로 끌어올리는 호이스팅 기법을 사용한다.
따라서, storybook의 의존성 패키지인 jackspeak이 설치되면서 node_modules에 위치된 것이다.
해결과정
해결방법은 두 가지이다.
- yarn v1을 yarn v3(yarn berry)로 마이그레이션한다.
꼭, yarn v3가 아니라 다른 패키지매니저를 사용해서 해결할 수 있다.
하지만, 위에서 언급했듯이 npm은 yarn v1과 의존성 관리 시스템이 유사하고 많이 개선됐지만 속도 측면에서 yarn보다는 느리기 때문에 pnpm이나 yarn v3으로 마이그레이션하는 것이 좋을 것 같다.
- 하위 의존성 패키지인 jackspeak의 버전을 2.1.1로 지정한 후, yarn.lock파일을 지우고 다시 설치한다.
package.json에 resolutions 속성으로 하위 의존성 패키지의 버전을 지정할 수 있다.
"resolutions": {
"jackspeak": "2.1.1"
},2번 방법을 먼저 시도해봤을때, storybook이 잘 실행되는 것을 확인했다.
하지만, 해당 에러 하단에 다음과 같은 에러가 덧붙여져 있었다.
Error [ERR_REQUIRE_ESM]: require() of ES Module
C:\Users\Desktop\practice2\node_modules\string-width\index.js
from C:\Users\Desktop\practice2\node_modules\cli-table3\src\utils.js not supported.
Instead change the require of index.js in C:\Users\Desktop\practice2\node_modules\cli-table3\src\utils.js
to a dynamic import() which is available in all CommonJS modules.jackspeak 버전이 업그레이드 되면서 commonjs방식을 지원하지 않아서 생기는 오류인 것 같다.
이 이슈 마지막에 보면, jackspeak 개발자가 yarn v1의 resolution algorithm에 문제가 있는 것 같고, 많은 패키지들이 cjs모듈 방식을 지원하지 않는 방향으로 가고 있다고 이런 이슈는 앞으로 빈번하게 발생할 것으로 예상한다고 한다.
따라서, 이 방법은 근본적인 해결 방법은 아닌 것 같다.
해결
일단, 해결방법 2번을 사용해서 해결했다. 이유는 git actions에 dev브랜치에 push하는 경우 스토리북이 크로마틱에 자동으로 배포되는 스크립트를 작성해놨는데, 빠른 배포를 위해 의존성 캐싱도 사용하고 있다.
다른 패키지 매니저로 변경하게 되면 해당 스크립트도 수정해야하므로, 임시로 해결해놓고 이후에 yarn berry나 pnpm으로 마이그레이션 할 예정이다.
참고
