Storybook 설치 오류

Storybook 설치 오류

$ storybook dev -p 6006
\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\utils.js:1
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module \Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\index.js from \Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\utils.js not supported.
Instead change the require of index.js in \Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\utils.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\utils.js:1:21)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\table.js:2:15)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\cli-table3\src\index.js:1:18)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\@storybook\core-server\dist\index.js:101:8716)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\@storybook\core-server\dist\generate.js:42:4494)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\@storybook\core-server\cli\bin\index.js:9:1)
    at Object.<anonymous> (\Users\Han\Downloads\부스트캠프\멤버십\web-p3-broadcast\client\node_modules\storybook\index.js:3:1) {
  code: 'ERR_REQUIRE_ESM';

Storybook을 설치하던 중 다음과 같은 오류가 계속해서 발생했다.

해결 방법

오류의 원인을 구글에 찾아보던 중 Storybook의 개발자가 이에 대해 답변한 것을 볼 수 있었는데, 그 이유는 이미 예전에 고친 오류지만, 우리가 현재 사용하고 있는 Yarn 1에 대해서는 업데이트를 지원하지 않기 때문에 생겨나는 오류라는 답변이었다. 또한, Yarn Berry로 바꾸면 자연스럽게 사라질 오류이기에 Yarn Berry로 바꾸는 것을 권장한다고 했다.

하지만 Yarn 1을 사용하던 중 Storybook 하나 때문에 Yarn Berry로 바꾸자니 주객이 전도된 느낌이 들어 다른 방법은 없나 찾아보았고 다른 해결책을 찾을 수 있었다.

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

다음 코드를 package.json에 추가한 후 Yarn의 캐시를 제거해준 후 yarn install을 실행해주면 오류가 발생하지 않고 정상적으로 작동했다. jackspeak라는 모듈의 버전이 Yarn 1과 호환이 안되므로 jackspeak의 버전을 고정시켜주면 해결되는 문제였던 것이다.