cloudflare / cloudflare/vinext

pnpm output loses colors when `create-vinext-app` initializing the project

Open
#2,863 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
406
Avg merge
2d 6h
Merged PRs (30d)
120

Description

## Summary

When installing dependencies for the new project with `create-vinext-app`, the output printed by pnpm loses its ANSI colors and is displayed as plain text.

The same pnpm commands normally produce colored output when run directly in a terminal, so the CLI appears to be preventing or stripping color output when spawning pnpm.

## Reproduction

Start a new project with `create-vinext-app`

```bash
pnpm create vinext-app@latest test-app
```

Choose the project configurations and install the project dependencies, then you can see the pnpm output just loses its colors.

Image

## Expected behavior

Image

## Possible root cause

pnpm dependencies installing process is spawned by `installDeps()` with `exec()` function, and the `stdio` is set to `inherit`.

https://github.com/cloudflare/vinext/blob/056cd026b3a2fa12d67c9d2ca941e75d2a47670e/packages/vinext/src/init.ts#L356-L360

However, `exec()` accepts the parameter `stdio` and just doesn't pass it to the `spawn()`. The `stdio` is actually hard-coded as `["inherit", "pipe", "pipe"]`.

https://github.com/cloudflare/vinext/blob/056cd026b3a2fa12d67c9d2ca941e75d2a47670e/packages/vinext/src/init.ts#L465-L473

## Notes

The hard-coded `pipe` is for detecting approve builds error (related #2279). So fixing this issue can be quite tricky.

Contributor guide

Open the contributing guide

Research direction

Start with packages/vinext/src/init.ts, reading installDeps() around lines 356-360 and exec() around lines 465-473, then reproduce with pnpm create vinext-app@latest test-app. Trace how stdio reaches the spawned pnpm process and how approve-build errors from #2279 are detected. Done means the initializer preserves pnpm's terminal colors without breaking that error detection.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript
Domain
cli
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.