Open5

読者コミュニティ|React Router v7 で Tutorial アプリをゼロから構築する手順解説🎉

TigRigTigRig

説明&手順がとても丁寧で、初心者の自分にもわかりやすくて助かりました!!(まだ途中なので、このあとも楽しく進めさせていただきます😄)

一点、環境構築でうまくいかなかった点があったので共有です💡

Storybook導入 のところで、 npx storybook@latest init を実行すると Storybook 8.6.3 がインストールされ、該当チャプター内の記載と2点違いがありました。

  • 「1️⃣パッケージのインストール」のコマンド実行 npx storybook@latest init で、用途の選択メッセージが出てきました
  • (上記でどちらを選択したかにかかわらず) npm run storybook が下図のエラーで失敗しました

対策として、 Storybook のバージョン 8.5 系をインストール ( npx storybook@8.5 ) することで、上記事象は解消しました。

もしかすると自分の環境だけで起こっている事象かもしれないのですが、念のため情報共有としてコメントさせて頂きました🙏
この先も楽しく勉強させて頂きます!

atmanatman

TigRigさん
コメント遅くなり申し訳ございません。ご確認&共有ありがとうございます!😊

すみません!Storybookの件では、ご迷惑をおかけしました💦
私の環境を確認したのですが、storybookのバージョンが8.5.3になっていました🙇
また、TigRigさんの実行環境はWindows(エラーにPowerShell等含まれているので)かと思われますが、私の場合はWSL(Linux)だったことも影響しているのかもしれません🤔

storybookのバージョンに関しては最新(8.6系)を利用する方が良いかと思いますので、こちらで動作確認しながら記事更新しておこうと思います!

あらためて、このような共有ありがとうございました!
エコシステムのバージョンアップが早いので、他のパッケージ導入でも記事通りに進まないことがあるかもしれません...その際は私も確認しますので、お気軽にご連絡頂ければと思います!

atmanatman

上記の件、いくつか情報共有しておきます!

①Storybook導入の手順更新
Storybook導入に、v8.6系のinit時の手順を追記しておきました!

②v8.6のinit時の選択肢
Storybookでコンポーネントの表示確認だけしたい場合、選択肢はどちらも不要(どちらも未選択状態)でOKです(コマンドに表示される聞き方だと、一見すると選択必須にも見えますが、両方に対して選択/未選択を選べます)。

例)両方とも未選択の状態
image

③git bashで解決した事例あり?
私のWindows環境ではエラーを再現できませんでした💦
参考になるか分かりませんが、git bashを利用するとエラーが解決されたような記事がありましたので共有しておきますね(古い内容ですが😅)。

https://stackoverflow.com/questions/68283635/spawn-c-windows-system32-windowspowershell-v1-0-powershell-enoent-error-while

TigRigTigRig

詳しくお教えくださりありがとうございます!!
また記事追記も感謝の限りです😭

②v8.6のinit時の選択肢
Storybookでコンポーネントの表示確認だけしたい場合、選択肢はどちらも不要(どちらも未選択状態)でOKです(コマンドに表示される聞き方だと、一見すると選択必須にも見えますが、両方に対して選択/未選択を選べます)。

こちら完全に読み違えておりました……! ありがとうございます🙇

③git bashで解決した事例あり?

storybook 最新バージョンを使ったほうが良いとのことでしたので、また後日こちらの方法ためしてみようと思います!!