https://ti-tomo-knowledge.hatenablog.com/entry/2024/07/05/100321

node.jsのバージョン17系でstorybookの導入をした時のメモです。
既存プロジェクトへの導入で、npxだとインストールに失敗してしまったので、1つずつモジュールをインストールして試行錯誤しました。

モジュールの追加

とりあえず以下をyarnコマンドでインストールしました。
storybookはreact-webpack5のFWで実行します。

yarn add -D @storybook/react
yarn add -D @storybook/react-webpack5
yarn add -D storybook

これでstorybookを起動すると以下のようなエラーが発生しました。

$ 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/XXXX/node_modules/cli-truncate/index.js:3
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/XXXX/node_modules/string-width/index.js from /Users/XXXX/node_modules/cli-truncate/index.js not supported.
Instead change the require of /Users/XXXX/node_modules/string-width/index.js in /Users/XXXX/node_modules/cli-truncate/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/XXXX/node_modules/cli-truncate/index.js:3:21)
    at Object.<anonymous> (/Users/XXXX/node_modules/listr2/dist/renderer/default.renderer.js:4:21)
    at Object.<anonymous> (/Users/XXXX/node_modules/listr2/dist/utils/renderer.js:4:28)
    at Object.<anonymous> (/Users/XXXX/node_modules/listr2/dist/lib/task.js:11:20)
    at Object.<anonymous> (/Users/XXXX/node_modules/listr2/dist/listr.js:7:16)
    at Object.<anonymous> (/Users/XXXX/node_modules/listr2/dist/index.js:13:14)
    at Object.<anonymous> (/Users/XXXX/node_modules/cypress/lib/tasks/install.js:10:5)
    at Object.<anonymous> (/Users/XXXX/node_modules/cypress/index.js:12:5) {
  code: 'ERR_REQUIRE_ESM'
}

これを解決するために、package.jsonに以下を追記しました。

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

これでyarn installしてもエラーは解消しないのですが、一度yarn.lockファイルを削除してからyarn installをすれば上手くいきました。