Yarn v1を使用しているとStorybook v7の実行がERR_REQUIRE_ESMで失敗する

Storybook Node.js

昨日まで動いていたStorybookが、 yarn install したら突然動かなくなったのでメモ。

環境

Node.js v20.10.0, Yarn 1.22.19, Storybook v7.5.3。

問題

Next.js v13プロジェクトで、Storybookを使ってコンポーネント等の確認をしている。

今回、新しいパッケージの検証のため、 yarn add や yarn remove 、 yarn install を繰り返した。

その後、 yarn storybook でStorybookを起動しようとすると、以下のエラーが発生し、起動できなくなった。

:red_circle: 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


<workspace>/node_modules/cli-table3/src/utils.js:1
const stringWidth = require('string-width');
          ^

Error [ERR_REQUIRE_ESM]: require() of ES Module <workspace>/node_modules/string-width/index.js from <workspace>/node_modules/cli-table3/src/utils.js not supported.
Instead change the require of index.js in <workspace>/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
  at Object.<anonymous> (<workspace>/node_modules/cli-table3/src/utils.js:one:21) {
 code: 'ERR_REQUIRE_ESM'
}

npm run storybook でも同様のエラーが発生する。

対応

エラーメッセージ内にGitHubのissueへのリンクがあるので、そちらを確認。

github.com

このメッセージに、経緯や原因、対応方法の記載がある。

以下のような経緯らしい。(軽く眺めただけなので間違っているかも)

  1. cliuiの変更に起因して、jackspeak v2.1.2以降ではYarn v1非対応のフォークである@isaacs/cliui v8.0.2を使うよう更新された
  2. Storybookが使用しているglobからjackspeakへの依存性が jackspeak@^2.0.3 となっており、jackspeak v2.1.2以降を使用するため、Yarn v1を使用しているとエラーが発生する

根本的な対応として推奨されているのは、Yarnをv3に更新することだが、Yarn v1のままで対応したい場合、 package.json に resolutions を追加し、 jackspeak のバージョンを 2.1.1 で指定する。

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

上記の記述を package.json に追加し、 yarn install を再実行すると、Storybookの起動時のエラーが発生しなくなった。

振り返り

突然動かなくなったので焦ったが、エラーメッセージにURLを含めてくれていたので非常に助かった。

もう2年くらい、「Yarn v1から移行しないとな～」とか言ってきたが、こういう問題が起こってくるといいかげん対応しないとだなあ。