문제 상황

Storybook 으로 MyComponent.stories.ts 파일을 만들고 두근거리는 마음으로 yarn storybook 커맨드를 실행하면 계속해서 에러가 발생했다.

🔴 Error: It looks like you are having a known issue with package hoisting.
Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

const stringWidth = require('string-width');
                    ^
Error [ERR_REQUIRE_ESM]: require() of ES Module ...

문제 파악

다행이도 이미 많은 사람들이 겪은 문제였고 관련 이슈 해결 방법도 나와있다. @tmeasday 의 이슈 커멘트를 확인하면 해결 방법을 알 수 있다.

요약하자면, 해당 이슈는 Yarn 1 을 사용할 때 발생하는 버그로 Yarn 1은 더 이상 지원되지 않아 이 버그가 수정될 가능성이 낮으니 Yarn 3으로 업그레이드 하라는 것. Yarn 1 을 사용해서 이슈를 해결하는 방법도 나와있다.

시도한 방법 (비추)

하지 말라고는 했지만 Yarn 1 을 고수하였다. Yarn berry 에 익숙하지 않아서 괜히 뭔가가 잘못될까봐 겁먹은 쫄보 방법(?)

위 이슈 커멘트에서도 나와 있듯이 jackspeak 패키지 버전을 고정해서 해결하는 방법이다. package.json 파일에 resolutions 필드를 다음과 추가하고 다시 install 하면 된다고 했다.

{
  // ...
  "resolutions": {
    "jackspeak": "2.1.1"
  }
}

이렇게 했는데도 여전히 문제가 발생했다.

이미 존재하는 캐시나 lock file 들을 제대로 삭제하지 않아서 발생하는 문제였다. 같은 이슈에 @floatrx 커멘트 를 참고하여 해결할 수 있었다. 솔루션은 다음과 같다.

우선 yarn 캐시를 모두 지운다.

yarn cache clean --all

의존성 파일을 모두 삭제한다.

rm node_modules/ yarn.lock package-lock.json

패키지를 다시 설치한다.

yarn

이렇게 해결하긴 했는데 뭔가 깔끔하지 않은 느낌 ?

해결 방법 (추천)

결국 Yarn 3 으로 업그레이드 했다. 이게 맞다.

사실 Yarn Berry가 기존의 Yarn 1 과는 꽤 달라서 변경할 게 많을 것 같아 겁먹고 시도하지 않았다. 그런데 이 포스트 (Yarn Berry로 마이그레이션하기) 를 읽어보니 생각보다 간단해서 시도해 보기로 했다. 무엇보다 이건 새로운 프로젝트 (날려도 아깝지 않은) 라 맘 편히 시도함 ^^;

1. Yarn 버전 변경하기

yarn set version berry

위 커맨드를 실행하면 .yarn 폴더와 .yarnrc.yml 파일이 생성된다.

2. 기존 의존성 마이그레이션하기

.yarnrc.yml 파일에 다음 라인을 추가한다.

nodeLinker: node-modules

저장 후 다음 커맨드를 실행한다.

yarn install

3. PnP 적용하기

설치가 끝나면 .yarnrc.yml 파일에 추가했던 라인 (nodeLinker ...) 을 삭제하고 저장한다. 즉, .yarnrc.yml 파일은 yarnPath 만 남아있어야 한다.

이제 다음 커맨드를 실행하여 PnP 버전으로 의존성을 설치하자.

yarn install

위 커맨드를 실행하면 .pnp.cjs 와 .pnp.loader.mjs 파일이 생성된다.

4. ZipFS 설치하기

위 3번까지 실행하면 이제 VSCode가 또 붉은색이 되는데 아직 끝나지 않았으니 겁먹지 말자. ZipFS 익스텐션을 설치하고, 타입스크립트를 사용하는 경우 다음 커맨드를 실행하자.

yarn dlx @yarnpkg/sdks vscode

그럼 끝이다. Storybook 도 에러 하나 없이 깔끔하게 실행된다 ✨

느낀점

Storybook 이슈를 해결하려고 했을 뿐인데 어쩌다 보니 Yarn Berry까지 도입하게 되었다. 생각보다 마이그레이션은 어렵지 않았고 역시 뭐든 일단 해보는 게 중요하다는 걸 다시금 느낀다. Yarn Berry 를 당장 사용하진 않으니 외면하고 있었지만 이번 기회로 공부해 볼 생각이다.