Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Create with Storybook add-on hangs on pnpm 11 under “Running commands for Storybook…”

オープン
#499 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
node.js, storybook, typescript

調査の方向性

Storybook add-on のコマンドとパッケージマネージャーの翻訳から始め、次に runCommandsAndInstallDependencies を追って、子プロセスと Clack spinner がどのように連携しているかを確認してください。提供されている pnpm 11 コマンドを実際の TTY で実行して再現し、Storybook のセットアップが完了するか、ハングしているように見えるのではなく approve-builds prompt が表示されることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

Which project does this relate to?

Create Tanstack App

Describe the bug

If I run TanStack create with the Storybook add-on on pnpm 11, the CLI can appear to hang forever on:

Running commands for Storybook...

Example (same shape as other create reports; adjust version/flags as needed):

pnpm dlx @tanstack/cli@latest create tanstack-app \
  --framework react \
  --add-ons storybook \
  --no-git \
  -y

The create spinner never finishes that step. What’s actually happening is that TanStack runs the Storybook add-on command (npx storybook init -y --no-devpnpm dlx storybook … for pnpm users) with the spinner still active. On pnpm 11 (TTY + cold dlx cache), pnpm waits for interactive approve-builds input for esbuild, but that prompt is easy to miss under the spinner — so the TanStack CLI looks stuck.

This is a TanStack create UX/invocation issue: the parent owns the spinner and how the child is launched. Storybook’s JS has not started yet when the prompt appears, so Storybook cannot surface or answer it.

Related background (investigation from the Storybook side): https://github.com/storybookjs/storybook/issues/35668
Related (same pnpm 11 build-approval theme, different failure mode — hard ERR_PNPM_IGNORED_BUILDS instead of a hang): https://github.com/TanStack/cli/issues/484

Your Example Website or App

N/A as a hosted app — this is a local TanStack CLI create hang and needs a real TTY (StackBlitz / non-TTY environments won’t show the same interactive approve-builds path).

Repro is the TanStack create command above (or interactive pnpm dlx @tanstack/cli@latest create choosing React + Storybook on pnpm 11).

Steps to Reproduce the Bug or Issue
  1. Use pnpm 11+ in a real terminal (TTY).
  2. Optionally clear the pnpm dlx cache so the approve-builds path is more likely:
    rm -rf "$(dirname "$(pnpm store path)")/dlx"
  3. Run TanStack create with the Storybook add-on, e.g.:
pnpm dlx @tanstack/cli@latest create tanstack-app \
  --framework react \
  --add-ons storybook \
  --no-git \
  -y
  1. See the CLI sit on Running commands for Storybook... / appear hung.
  2. If you look carefully at the terminal (or pause the spinner), pnpm may be waiting on an approve-builds prompt for esbuild.
Expected behavior

As a user, I expected TanStack create to finish (or show a clear prompt I can answer). Instead it looks stuck on “Running commands for Storybook…” while the child is waiting on stdin.

Screenshots or Videos

No response

Platform
Additional context

Why this is on TanStack: create launches the Storybook add-on command and keeps the Clack spinner up for the whole child lifetime. Fixing visibility and/or passing pnpm allow-build flags is in that path (storybook add-on command + package-manager translation + runCommandsAndInstallDependencies).

Workaround for the underlying pnpm step (verified): if you run the child yourself,

pnpm --allow-build=esbuild dlx storybook@latest init -y --no-dev

Suggested fixes:

  1. When the package manager is pnpm, run the Storybook add-on command as pnpm --allow-build=esbuild dlx storybook init -y --no-dev (flag before dlx).
  2. Pause/stop the spinner when the child may need a TTY so pnpm’s approve-builds UI is visible.
  3. Document the workaround until (1) lands.
主要言語
TypeScript
スター
1.3k
フォーク
185
平均マージ
18時間 45分
マージ済み PR(30日)
2

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/cli のほかの issue

TanStack/cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。