start-storybook output is missing colors and progress bar

[kaiyoma]

Describe the bug
start-storybook seems to have some issues with its output, depending on how it's invoked and what package manager is used.

To Reproduce
If I use yarn and run start-storybook through a custom package.json script, then everything is great: the output has colors and the progress bar works. However, if I run start-storybook directly, like this:

./node_modules/.bin/start-storybook -c storybook --ci -p 9001

then the output is terrible. Colors are gone and instead of a nice progress bar, I get thousands of lines of ugly output:

<s> [webpack.Progress] 0% compiling
<s> [webpack.Progress] 10% building 0/0 modules 0 active
<s> [webpack.Progress] 10% building 0/1 modules 1 active multi C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\core-server@6.2.8_d08bd03f65bcf0dd790a51c562faae43\node_modules\@storybook\core-server\dist\cjs\globals\polyfills.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\core-server@6.2.8_d08bd03f65bcf0dd790a51c562faae43\node_modules\@storybook\core-server\dist\cjs\globals\globals.js C:\Work\web-components\packages\cv-components\storybook\storybook-init-framework-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\addon-docs@6.2.8_40b8a82940953bec7f58d11c5c07c10b\node_modules\@storybook\addon-docs\dist\esm\frameworks\common\config.js-generated-other-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\addon-docs@6.2.8_40b8a82940953bec7f58d11c5c07c10b\node_modules\@storybook\addon-docs\dist\esm\frameworks\react\config.js-generated-other-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\addon-knobs@6.2.8_9f48369ed4321469d5d721870f4dbdbc\node_modules\@storybook\addon-knobs\dist\esm\preset\addDecorator.js-generated-other-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\addon-actions@6.2.8_9f48369ed4321469d5d721870f4dbdbc\node_modules\@storybook\addon-actions\dist\esm\preset\addDecorator.js-generated-other-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\@storybook\addon-actions@6.2.8_9f48369ed4321469d5d721870f4dbdbc\node_modules\@storybook\addon-actions\dist\esm\preset\addArgs.js-generated-other-entry.js C:\Work\web-components\packages\cv-components\storybook\preview.js-generated-config-entry.js C:\Work\web-components\packages\cv-components\storybook\generated-stories-entry.js C:\Work\web-components\common\temp\node_modules\.pnpm\webpack-hot-middleware@2.25.0\node_modules\webpack-hot-middleware\client.js?reload=true&quiet=false&noInfo=undefined
<s> [webpack.Progress] 10% building 1/1 modules 0 active
i ｢wdm｣: wait until bundle finished:
<s> [webpack.Progress] 10% building 1/2 modules 1 active C:\Work\web-components\common\temp\node_modules\.pnpm\babel-loader@8.2.2_7e486df4975382d398886f3bfd1b266c\node_modules\babel-loader\lib\index.js??ref--7-0!C:\Work\web-components\packages\cv-components\storybook\storybook-init-framework-entry.js
<s> [webpack.Progress] 10% building 1/3 modules 2 active C:\Work\web-components\common\temp\node_modules\.pnpm\babel-loader@8.2.2_7e486df4975382d398886f3bfd1b266c\node_modules\babel-loader\lib\index.js??ref--7-0!C:\Work\web-components\packages\cv-components\storybook\preview.js-generated-config-entry.js
<s> [webpack.Progress] 10% building 1/4 modules 3 active C:\Work\web-components\common\temp\node_modules\.pnpm\babel-loader@8.2.2_7e486df4975382d398886f3bfd1b266c\node_modules\babel-loader\lib\index.js??ref--7-0!C:\Work\web-components\packages\cv-components\storybook\generated-stories-entry.js
...

Expected behavior
The nice output should appear all the time.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\Node.js\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Spartan (44.19041.906.0), Chromium (89.0.774.75)
  npmPackages:
    @storybook/addon-actions: 6.2.8 => 6.2.8
    @storybook/addon-docs: 6.2.8 => 6.2.8
    @storybook/addon-knobs: 6.2.8 => 6.2.8
    @storybook/addons: 6.2.8 => 6.2.8
    @storybook/core: 6.2.8 => 6.2.8
    @storybook/react: 6.2.8 => 6.2.8
    @storybook/theming: 6.2.8 => 6.2.8

Additional context
In a Rush.js monorepo (using pnpm instead of yarn), this problem happens all the time, even if I define a custom package.json script and execute it via rushx. The problem as a whole feels like a package dependency issue. Is Storybook defining its dependencies properly?

[shilman]

@ndelangen any idea what's going on here?

[ndelangen]

@kaiyoma This is literally what the --ci is for:
https://storybook.js.org/docs/react/api/cli-options#start-storybook

"I'm going to run this on CI, which will log into a plain text log-file, No need for fancy stuff like colors or progress-bars that move the cursor around."

If you don't want to progress you can add --quiet too, and then there should be no progress at all.

[kaiyoma]

Interesting, I already run this with the --ci option (and have for years). Are you sure that flag works? With yarn, I see progress percentages and colors; with any other invocation method, I see thousands of lines of (seemingly wrong) output.

[kaiyoma]

I just tried running with and without --ci and I don't see a difference between the two. I'm getting thousands of lines of progress bar output either way.

[kaiyoma]

Specifying --ci and still getting a ton of output:

It all seems to be going to stderr (which is possibly related to another issue I filed: #14621) and there's a lot of it:

$ ./node_modules/.bin/start-storybook -c storybook --ci -p 9001 &> start-storybook.out

(Ctrl + C)

$ wc -l start-storybook.out
4749 start-storybook.out

[ndelangen]

😭
Seem you're right, I don't know what happened. Will have to investigate.

[kaiyoma]

Whew! I feel less crazy now. 😄 I still have no idea why I'm seeing different results though when launching via different methods (yarn run vs. invoking directly vs. rushx). That's still baffling to me.

[ndelangen]

me neither, can you share a reproduction maybe?

[ndelangen]

I was wrong about the scope of --ci is really only does:

CI mode (skip interactive prompts, don't open browser)

Something is causing your terminal to no longer respect colors are cursor movements

This kind of stuff: https://ss64.com/nt/syntax-ansi.html

We use chalk for colors for example:

storybook/lib/core-server/src/build-static.ts

Line 1 in 0331b79

import chalk from 'chalk';

And the webpack-progress-plugin:

storybook/lib/core-server/src/manager/builder.ts

Line 71 in 44412aa

new ProgressPlugin({ handler, modulesCount }).apply(compiler);

https://webpack.js.org/plugins/progress-plugin/

Which leads to this:
https://github.com/webpack/webpack/blob/b737330861627fd8da1ac598b0a643b2f09c9bc0/lib/Compiler.js#L280

At which point I give up understanding what's going on...

[kaiyoma]

For me, the repro is to simply run start-storybook without using yarn. I have two repos (of proprietary code, so I can't share them unfortunately) and I can repro this in both. Try running start-storybook directly or with npm and you'll get really verbose, color-less output.

[ndelangen]

@kaiyoma If I try to run start-storybook without yarn it won't work at all, because I do not have storybook globally installed.

[kaiyoma]

Running the binary directly (no colors, progress bar doesn't work right):

Running the same exact command line through yarn (everything looks good):

[kaiyoma]

@kaiyoma If i run start-storybook without yarn it won't work at all, because I do not have storybook globally installed.

Run it directly out of node_modules/.bin. Or run it with npm run. Or with rushx in a Rush.js monorepo (which is my actual use case here).

[ndelangen]

[ndelangen]

I can't reproduce, using the .bin directly..

I do not have a rush monorepo handy.

I likely also doesn't help we're running 2 different operating systems with different terminal applications..

[kaiyoma]

Yeah, this could be related specifically to running Storybook on Windows 10 with the git bash shell. Storybook is the only command-line tool that's exhibited this kind of behavior. For example, webpack uses a progress bar and colored output and I can run that directly and it's just fine.

[ndelangen]

@kroeder I know you use storybook and windows 10, have you noticed anything like this?

[kroeder]

It does look normal on my windows 10 machine using git-bash

info => Loading angular-cli config.
info => Get angular-cli webpack config.
info => Loading custom Webpack config (full-control mode).
36% building 218/254 modules 36 active C:\_myplace\next\next-client\node_modules\lodash\toNumber.js

Same result in cmd for me

[ndelangen]

thanks for checking @kroeder really appreciated. I'm stuck on being unable to reproduce the issue @kaiyoma.

Does the problem occur in a specific version range of storybook? Perhaps this could give me an insight into what's changed recently that is causing this behavior on your machine.

[kaiyoma]

I can't seem to run Storybook 6.1 because when I do, I get some low-level core-js error that causes the entire thing to bail. Any other versions you want me to try?

[ndelangen]

I don't know how to move this forwards then. Maybe another user experiencing the same issue can pitch in, and assist in getting a reliable reproduction.

[kaiyoma]

Interesting data point here: I was able to repro this same behavior with pnpm. If I run pnpm install through yarn, then I see colored output and a single updating progress line. If I run through any other mechanism, I see mono-colored output, with no updating progress line, similar to what you'd see in a logfile.

Basically, it seems that yarn is doing something special that makes the output of tools (on Windows) look and behave correctly, and that behavior isn't replicated by either npm or pnpm. Seems like this is more of a package manager / yarn / TTY issue, and not a Storybook issue.

[Hydrair]

I can report the same issue with Storybook 6.3.12 on Windows 10 with both Powershell and CMD as well as yarn and npm. Only info is colored.

My workaround is to use https://www.npmjs.com/package/progress-bar-webpack-plugin with stream: process.stdout and yarn dev 2> $null. Then the Webpack messages get redirected to $null but there is still a Progressbar in the terminal.

[AnthonyLenglet]

the issue is still present as of 6.5 alpha 10, no --ci option in the command