CLI: Allow esbuild builds for Storybook-owned pnpm dlx

[ndelangen]

Closes #

What I did

Related to #35668. On pnpm 11+, Storybook-owned pnpm dlx can hang on an interactive approve-builds prompt (or fail with ERR_PNPM_IGNORED_BUILDS) when esbuild needs a build script.

I pass version-gated --allow-build=esbuild only for Storybook-owned pnpm dlx (runPackageCommand with useRemotePkg: true) when local pnpm is >= 10.2.0.

I deliberately do not pass --allow-build on pnpm add or pnpm install. Empirically on pnpm 11.18, pnpm add --allow-build=esbuild persists allowBuilds.esbuild: true into the user's pnpm-workspace.yaml; pnpm --allow-build=esbuild dlx does not. I also do not seed/write allowBuilds into the user's project.

This supersedes the broader approach in #35671 with a narrower scope (dlx only; no add/install flags, no project config seeding, no tasks/verdaccio changes). It does not fully fix the TanStack Start outer install hang described in #35668 (that remains upstream).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Use a clean directory with pnpm >= 10.2 (ideally 11.x) and no prior Storybook install.
2. Run a Storybook CLI path that uses pnpm dlx (e.g. pnpm dlx storybook@next init / create-storybook via the Storybook-owned remote package command), in a TTY, without pre-approving esbuild builds.
3. Confirm the command does not stop on an interactive approve-builds picker for esbuild during the Storybook-owned dlx step.
4. After the run, inspect the project: confirm Storybook did not write allowBuilds / pnpm.onlyBuiltDependencies (or similar) into package.json / pnpm-workspace.yaml solely because of this change.
5. Optionally repeat with pnpm < 10.2 and confirm CLI args omit --allow-build (unit tests cover this).

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Made with Cursor

[Copilot]

Pull request overview

This PR updates the pnpm package-manager proxy in Storybook’s core CLI utilities to avoid pnpm 11+ interactive “approve builds” prompts (and related ERR_PNPM_IGNORED_BUILDS) during Storybook-owned pnpm dlx executions by conditionally adding --allow-build=esbuild when supported.

Changes:

• Add pnpm version detection (cached) and version-gated --allow-build=esbuild args for Storybook-owned pnpm dlx invocations (pnpm >= 10.2.0).
• Ensure --allow-build is not applied to pnpm install / pnpm add to avoid persisting allowBuilds into user project config.
• Add unit tests covering the flag placement/gating and ensuring installs remain “plain” (no --allow-build).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
code/core/src/common/js-package-manager/PNPMProxy.ts	Adds cached pnpm version detection and conditionally prefixes Storybook-owned pnpm dlx calls with --allow-build=esbuild (pnpm >= 10.2.0).
code/core/src/common/js-package-manager/PNPMProxy.test.ts	Adds unit tests asserting the new dlx flag behavior and confirming install/add remain unchanged.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 265f22ce-0e2a-4708-b262-deb61ccd8368

📥 Commits

Reviewing files that changed from the base of the PR and between 8ee8828 and 6162325.

📒 Files selected for processing (1)

• code/core/src/common/js-package-manager/PNPMProxy.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/common/js-package-manager/PNPMProxy.ts

---

Walkthrough

PNPMProxy now detects and caches the pnpm version. For pnpm 10.2.0 and newer, remote dlx commands include --allow-build=esbuild. Tests cover supported and older versions.

Changes

PNPM build approval handling

Layer / File(s)	Summary
Version-gated dlx command construction code/core/src/common/js-package-manager/PNPMProxy.ts	PNPMProxy caches synchronous pnpm version lookup results and adds --allow-build=esbuild to supported remote dlx commands. exec, add, and install commands remain unchanged.
Command behavior tests code/core/src/common/js-package-manager/PNPMProxy.test.ts	Tests mock pnpm versions and verify dlx behavior for supported and older pnpm versions. Existing install and dependency-addition command behavior remains covered.

Sequence Diagram(s)

sequenceDiagram
  participant PNPMProxy
  participant pnpm
  participant semver
  PNPMProxy->>pnpm: Read pnpm --version
  PNPMProxy->>semver: Check version against 10.2.0
  semver-->>PNPMProxy: Supported or unsupported
  PNPMProxy->>pnpm: Run remote dlx with conditional build approval

Loading

Possibly related PRs

• storybookjs/storybook#35671: Both PRs update PNPMProxy.ts and its tests for version-gated --allow-build=esbuild handling.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

code/core/src/common/js-package-manager/PNPMProxy.test.ts (1)

28-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Move mock behavior into beforeEach.

Lines 130, 132, 148, and 150 change mock behavior inside test cases. Set the command result and a mutable pnpm-version value in beforeEach. In each boundary test, change only the version value before creating PNPMProxy. Use a typed command-result fixture instead of as any.

As per coding guidelines, “Implement mock behaviors in beforeEach blocks in Vitest tests” and “Avoid inline mock implementations within test cases in Vitest tests.”

Also applies to: 129-132, 147-150

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/core/src/common/js-package-manager/PNPMProxy.test.ts` around lines 28 -
34, Move the mockedExecuteCommandSync implementation from mockPnpmVersion and
individual tests into beforeEach, using a typed command-result fixture and a
mutable pnpm-version value. Update each boundary test to change only that
version before constructing PNPMProxy, while preserving the existing command
matching and returned-result behavior.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/core/src/common/js-package-manager/PNPMProxy.ts`:
- Line 14: Update the version parsing and gate in PNPMProxy to preserve
prerelease identifiers instead of using coerce, so versions such as 10.2.0-rc.1
are compared as prereleases and use plain dlx. Retain the existing allow-build
behavior for supported stable versions, and add coverage verifying the
10.2.0-rc.1 case.

---

Nitpick comments:
In `@code/core/src/common/js-package-manager/PNPMProxy.test.ts`:
- Around line 28-34: Move the mockedExecuteCommandSync implementation from
mockPnpmVersion and individual tests into beforeEach, using a typed
command-result fixture and a mutable pnpm-version value. Update each boundary
test to change only that version before constructing PNPMProxy, while preserving
the existing command matching and returned-result behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8fe6fd5a-3b04-4e5d-986e-a56c001834d6

📥 Commits

Reviewing files that changed from the base of the PR and between bb5ab56 and 30c28e3.

📒 Files selected for processing (2)

• code/core/src/common/js-package-manager/PNPMProxy.test.ts
• code/core/src/common/js-package-manager/PNPMProxy.ts