経緯とかいろいろ
React + Typescript + storybook の環境で新しくプロジェクトを作成し、storybookを起動すると「Storybook needs either a "main" or "config" file.」が出て処理が中断した。
我々は問題解決のために調査を開始した。そして解決策を探すのにかなりの時間を費やした。
なので、これからStorybookをさわる皆さんが同じ問題にぶち当たり「もうだめ…あきらめよ」とならないために解決策をここに記述する。
開発環境
- react 17.0.2
- @storybook/react 6.4.12
エラー内容
「Storybook needs either a "main" or "config" file.」
上記メッセージの意味は「storybookは、mainファイルとconfigファイルが必要だ」
原因
mainファイルが存在するのに、以下の理由で指定パスへのアクセスに失敗している。
原因となるパスの中にバックスラッシュが使用されていて、これのせいでファイルが見つからず「storybookは、mainファイルとconfigファイルが必要だ」と怒られるのだ。
なので、原因となるバックスラッシュをスラッシュに置換することで問題が解決する。
解決策
- 「(プロジェクト)\node_modules@storybook\core-common\dist\cjs\utils\validate-configuration-files.js」にアクセス
- 43行目あたりまでスクロールして、コードを以下のように修正する
validate-configuration-files.js
//before
return !!_glob.default.sync(_path.default.resolve(configDir, ` ${file}${extensionsPattern}`)).length;
//after
return !!_glob.default.sync(_path.default.resolve(configDir, `${file}${extensionsPattern}`).split(_path.default.sep).join("/")).length;