yarn storybook error const stringWidth = require('string-width')

react에 rollup.js를 설정하고 storybook을 설치하고 $ yarn storybook 했더니 에러가 발생하였고, 해결방식을 정리해 본다.

 

이슈 URL

https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

[Bug]: string-width dependency stops storybook from executing · Issue #22431 · storybookjs/storybook

 

에러 내용

$ yarn storybook

yarn run v1.22.19
$ storybook dev -p 6006
🔴 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


/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/src/utils.js:1
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/string-width/index.js from /Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/src/utils.js not supported.
Instead change the require of index.js in /Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/src/utils.js:1:21)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/src/table.js:2:15)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/cli-table3/index.js:1:18)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/@storybook/core-server/dist/index.js:104:2802)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/@storybook/cli/dist/generate.js:11:4494)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/@storybook/cli/bin/index.js:26:1)
    at Object.<anonymous> (/Users/deokjoonkang/dev/projects/gundam/design-system/react-storybook-rollup-starter/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.9.0
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

해결 방법

yarn cache 삭제

$ yarn cache clean --all

 

yarn & npm 최신버전으로 업데이트

$ npm install -g npm@latest
$ npm install -g yarn@latest

 

프로젝트에서 라이브러리 관련 삭제

$ rm -rf node_modules
$ rm -rf yarn.lock

 

라이브러리 재설치

$ yarn

 

 

근데.. 필자는 이렇게 했을때 로컬환경에서는 되었는데 아래처럼 하지않고 chromatic에 올리면 에러가 나더라..

아래 추가하고 초기화 다시한번 진행하고 chromatic에 올렸더니 정상적으로 모두 동작하였다.

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