building your Storybook fails (only with chromatic)

[thelfensdrfer]

yarn: 1.22.5

npm: 6.14.9

$ CHROMATIC_PROJECT_TOKEN=xxx npx chromatic --exit-zero-on-changes

Chromatic CLI v5.5.0
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '*******ncmi'
  ✔ Retrieved git information
    → Commit 'b0c8382' on branch 'master'; found 1 baseline commit
  ✔ Collected Storybook metadata
    → Storybook v6.1.11 for Vue; supported addons found: Actions, Backgrounds, Docs, Links, Viewport
  ✖ Building your Storybook
    → Command failed: build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt
    Publish your built Storybook
    Verify your Storybook
    Take snapshots of your stories

The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt

ℹ Storybook build output:
build-storybook.log

build-storybook.log exists but is empty. If I run the failed command npm run --silent build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt manually, the storybook gets build.

┆Issue is synchronized with this Asana task by Unito

[tmeasday]

Hi @thelfensdrfer did you figure this out? Perhaps you could write into Chromatic support about this, this repo isn't the best place for quick turnarounds ;)

[thelfensdrfer]

No, I did not.

[nikandlv]

Why is this closed?
The issue is still here

[tmeasday]

@nikandlv if you are seeing the issue, can you write into Chromatic support? These issues tend to be customer specific and involve private details of their CI setup so a public repo isn't an appropriate place to discuss them.

[thelfensdrfer]

This does not make sense at all. Which parts of this issue are confidential?

Edit: My project is somewhat open source and I am willing to share any needed details. If you do not want to work with public issues, that's fine. But please deactivate issues then. Otherwise it just looks like this is a great project without any issues, which it is not, a project of without issues I mean. It is still great 👍

[tmeasday]

@thelfensdrfer I mean specifically issues with your Storybook failing to build on CI, when triggered by Chromatic.

In my experience it is a fairly common problem that users have but it is rarely a bug in the chromatic npm package (which just calls out to build-storybook, after all), and more often is due to some (often private) specific detail of their CI setup.

The reason I would prefer you to write into support is I want you to get your issue resolved so you can get started with Chromatic, and our support is both synchronous and has regular rotation of folks watching it; unlike these issues which are looked at more infrequently!

I wouldn't close an issue for something more specific as evidenced by the fact that we have 16 open issues!

[thelfensdrfer]

I wouldn't close an issue for something more specific as evidenced by the fact that we have 16 open issues!

This is true.

I just hate private issue tracking because maybe some other guy or gal has the same problem I have. Maybe it will turn out the problems are different, but maybe they aren't.

which just calls out to build-storybook, after all

In this case CI isn't the problem. The initial command above was executed in a default bash terminal on my development machine. If chromatic would just call build-storybook, which I can do successfully manually from the same directory, then there wouldn't be a problem. Sadly the initial bug report was two months ago, since then I think I just worked around the issue.

chromatic-cli/bin/tasks/build.js

Lines 46 to 69 in 7710e62

	export const buildStorybook = async (ctx) => {
	ctx.buildLogFile = path.resolve('./build-storybook.log');
	const logFile = fs.createWriteStream(ctx.buildLogFile);
	await new Promise((resolve, reject) => {
	logFile.on('open', resolve);
	logFile.on('error', reject);
	});
	try {
	const { command, clientArgs, scriptArgs } = ctx.spawnParams;
	await Promise.race([
	execa(command, [...clientArgs, ...scriptArgs], { stdio: [null, logFile, logFile] }),
	timeoutAfter(ctx.env.STORYBOOK_BUILD_TIMEOUT),
	]);
	} catch (e) {
	const buildLog = fs.readFileSync(ctx.buildLogFile, 'utf8');
	ctx.log.error(buildFailed(ctx, e, buildLog));
	ctx.exitCode = 201;
	ctx.userError = true;
	throw new Error(failed(ctx).output);
	} finally {
	logFile.end();
	}
	};

But there is in fact not much going on there, so I can't say where the problem is at the moment.

[thelfensdrfer]

@nikandlv I solved this issue by building the storybook manually and only upload it via the chromatic-cli:

yarn build-storybook
npx chromatic --exit-zero-on-changes -d storybook-static/

[divijb]

I have been having the same issue from my local machine as well. I have even tried previous branches which worked just fine.

Chromatic had been working as of 1/20/2021. Then we had removed the step from our CI for a bit. When we added it back in about a week ago, the "Building Your Storybook" step just hangs and does not move forward. I can run build-storybook independently just fine. I have tried upgrading to the newest version of Chromatic with no success, same issue.

[tmeasday]

@divijb did your version of SB change in the meantime? Can you run chromatic locally (outside of CI)?

[divijb]

@divijb did your version of SB change in the meantime? Can you run chromatic locally (outside of CI)?

Neither the Chromatic or the SB versions changed. In fact, I tried an older branch with the same results. This was failing on CI, so I have been trying to figure it out locally, without any luck.

I've resorted to doing what @thelfensdrfer is doing, building out storybook and then just uploading
build-storybook && npx chromatic...

[divijb]

^ To be clear, I inherited this and it was working on CI just fine for a couple of months, until late January. This week was the first time I've been trying it locally and it was failing at the build-storybook step

[tmeasday]

This was failing on CI, so I have been trying to figure it out locally, without any luck.

Does that mean it isn't failing locally? Using a separate build-storybook step is fine but it would be good to understand if there's a bug here.

[inaki]

I have the same problem for a while. I can build the storybook manually running yarn build-storybook but if I run npx chromatic --project-token <<my-token>> it throw the storybook build error.

error log

Chromatic CLI v5.6.3
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '******jmxc'
  ✔ Retrieved git information
    → Commit '2088c1f' on branch 'Update/chromatic'; found 1 baseline comm
it
  ✔ Collected Storybook metadata
    → Storybook v6.1.21 for Vue; supported addons found: A11y, Actions, Ba
ckgrounds, Docs, Knobs, Links, Storysource, Viewport
  ✖ Building your Storybook
    → Command failed: build-storybook -- --output-dir /var/folders/8_/nhzp
…
    Publish your built Storybook
    Verify your Storybook
    Take snapshots of your stories

The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Operation timed out

ℹ Storybook build output:
/Users/muku/repos/some-components/build-storybook.log

Watching /Users/muku/repos/some-components and all sub-directories not excluded by your .gitignore. Will not monitor dotfiles.
Found & ignored ./node_modules ; is listed in .gitignore
Found & ignored ./dist/@nextrequestco/nr-components.css ; has ignored extension
Starting: build-storybook -- --output-dir /var/folders/8_/nhzp10rx0000gnenne09gn/T/chromatic--25618-iLKHKKLKJKL67
internal/modules/cjs/loader.js:883
  throw err;
  ^
Error: Cannot find module '/Users/muku/repos/some-components/build-storybook'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

npm ERR! code 201
npm ERR! path /Users/muku/repos/some-components
npm ERR! command failed
npm ERR! command sh -c npx chromatic --project-token <<my-secret-token>>

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/muku/.npm/_logs/2021-03-09T14_07_10_490Z-debug.log

IMHO this error message doesn't help or make sense sin my build-storybook cli is working properly. I wonder if downgrade will solve this problem, since it was working properly before.

[tmeasday]

@inaki what version of npm/yarn are you using? that is a strange error indeed. Maybe worth a separate issue.

[inaki]

I was using this versions 💀 :

node: v14.15.1
npm: 7.6.1

I switch and use these now and is working 👍 :

node: v13.14.0
npm: 6.14.4

Thanks @tmeasday :)

[divijb]

This was failing on CI, so I have been trying to figure it out locally, without any luck.

Does that mean it isn't failing locally? Using a separate build-storybook step is fine but it would be good to understand if there's a bug here.

The Chromatic build-storybook step is failing locally and in Github Actions

[tmeasday]

The Chromatic build-storybook step is failing locally and in Github Actions

When it fails locally does it just hang?

[divijb]

The Chromatic build-storybook step is failing locally and in Github Actions

When it fails locally does it just hang?

It seems to hang for a long period. Much much longer than it should take to show fail/success of storybook build process. It eventually shows that it failed.

[thelfensdrfer]

Same.

[tmeasday]

@divijb @thelfensdrfer and what does it say when it fails? Is there something in the log?

[thelfensdrfer]

yarn: 1.22.5

npm: 6.14.9

$ CHROMATIC_PROJECT_TOKEN=xxx npx chromatic --exit-zero-on-changes



Chromatic CLI v5.5.0

https://www.chromatic.com/docs/cli



  ✔ Authenticated with Chromatic

    → Using project token '*******ncmi'

  ✔ Retrieved git information

    → Commit 'b0c8382' on branch 'master'; found 1 baseline commit

  ✔ Collected Storybook metadata

    → Storybook v6.1.11 for Vue; supported addons found: Actions, Backgrounds, Docs, Links, Viewport

  ✖ Building your Storybook

    → Command failed: build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt

    Publish your built Storybook

    Verify your Storybook

    Take snapshots of your stories



The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:



- Check the Storybook build log printed below.

- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.

- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook



Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt



ℹ Storybook build output:

build-storybook.log

build-storybook.log exists but is empty. If I run the failed command npm run --silent build-storybook -- --output-dir /tmp/chromatic--31522-Y2kKkIx9HmLt manually, the storybook gets build.

[tmeasday]

Oh, sorry I missed the fact that the build-storybook file was empty. That's weird. @ghengeveld any ideas?

[froliceric0914]

Encountered the same issue when run npx chromatic --project-token $CHROMATIC_PROJECT_TOKEN"
build-storybook succeeds locally, but cannot successfully run Chromatic CLI

Chromatic CLI v5.6.1
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '********cb2c'
  ✔ Retrieved git information
    → Commit '739dc18' on branch 'master'; found 1 baseline commit
  ✔ Collected Storybook metadata
    → Storybook v6.1.21 for Html; supported addons found: Actions, Backgrounds,
 Docs, Links, Viewport
  ✖ Building your Storybook
    → Command failed: build-storybook -- --output-dir /var/folders/8x/5xq5tc6n3
…
    Publish your built Storybook
    Verify your Storybook
    Take snapshots of your stories

The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Operation timed out

[brian-mcallister-lab49]

Seeing a similar issue on my project (https://github.com/lab49/react-value-flash), but without any error output. I'm building on CircleCI. The task times out after 10 minutes, and I see the following output:

> @lab49/react-value-flash@0.1.3 chromatic
> npx chromatic --project-token <censored> "--exit-zero-on-changes"


Chromatic CLI v5.1.0
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '******qeah'
Retrieving git information
Retrieved git information
    → Commit '4815d36' on branch 'master'; found 1 baseline commit
Collecting Storybook metadata
Collected Storybook metadata
    → Storybook v6.0.16 for React; supported addons found: Actions, Backgrounds, Docs, Viewport
Building your Storybook
    → Running command: build-storybook -- --output-dir /tmp/chromatic-25184kHIdxmQ2NVO

Too long with no output (exceeded 10m0s): context deadline exceeded

[blvdmitry]

Had the same issue and it was resolved by changing my package.json script from
npx chromatic --project-token abc to chromatic --project-token abc

[JulianKarhof]

For me this issue was temporarily fixed by changing my npm version to 6.14.7, after referencing #213.

[aiev]

Had the same issue and it was resolved by changing my package.json script from
npx chromatic --project-token abc to chromatic --project-token abc

This also worked out for me, thanks for that bro!

I'm using chromatic@5.6.2, npm@7.7.6 and node v15.12.0

[brandondurham]

Had the same issue and it was resolved by changing my package.json script from
npx chromatic --project-token abc to chromatic --project-token abc

Worked for me. Thank you!

[ghengeveld]

The issue where the "build storybook" step hangs until it times out was traced back to the use of npx (not npm) v7. It has been fixed in #305 and released in 5.8.0.

If you still encounter this after upgrading, please report/reopen. In case you cannot upgrade to the latest CLI, the workaround is to use npm run chromatic (which expects you have such a script) rather than npx chromatic.

[damilareolowoniyi]

Hi guys i'm having error when building storybook , yarn version is v1.22.4 and node version is v14.6.0 Anyone have any idea how i can solve this?

Chromatic CLI v6.5.1
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '********fde4'
  ✔ Retrieved git information
    → Commit '6b9f803' on branch 'master'; no ancestor found
  ✔ Collected Storybook metadata
    → Storybook 6.4.19 for Html; supported addons found: A11y, Actions, Backgrounds, Docs, Essentials, Events, Jest, Knobs, Links, Storyshots, Storysource, View
port
  ✖ Building your Storybook
    → Command failed: npm run --silent build-storybook -- --output-dir /var/folders/pv/fvvj93l1439g3zb88mws9wzw0000gn/T/chromatic--18689-d64lIq4wrudt
    Publish your built Storybook
    Verify your Storybook
    Test your stories

The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /var/folders/pv/fvvj93l1439g3zb88mws9wzw0000gn/T/chromatic--18689-d64lIq4wrudt

ℹ Spawn settings:
{
  "client": "npm",
  "clientVersion": "6.14.6",
  "nodeVersion": "v14.6.0",
  "platform": "darwin",
  "command": "npm",
  "clientArgs": [
    "run",
    "--silent"
  ],
  "scriptArgs": [
    "build-storybook",
    "--",
    "--output-dir",
    "/var/folders/pv/fvvj93l1439g3zb88mws9wzw0000gn/T/chromatic--18689-d64lIq4wrudt"
  ]
}

ℹ Storybook build output:
/Users/damilareolowoniyi/Documents/Storybook-base/storybook-lwc/packages/lwc-library/build-storybook.log

info @storybook/web-components v6.4.19
info 
info => Cleaning outputDir: /Users/damilareolowoniyi/Documents/Storybook-base/storybook-lwc/static-site/lwc-library
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading custom manager config
info => Using implicit CSS loaders
info => Using default Webpack4 setup
(node:18707) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Preview built (27 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   vendors~main.34f4f000.iframe.bundle.js (1.92 MiB)
WARN   10.f1bf6e53.iframe.bundle.js (602 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (2.13 MiB)
WARN       runtime~main.8310a913.iframe.bundle.js
WARN       vendors~main.34f4f000.iframe.bundle.js
WARN       main.7a3445a2.iframe.bundle.js
WARN 
info => Manager built (31 s)
info => Output directory: /Users/damilareolowoniyi/Documents/Storybook-base/storybook-lwc/static-site/lwc-library
error: unknown option '--output-dir'

[kylegach]

Hi guys i'm having error when building storybook , yarn version is v1.22.4 and node version is v14.6.0 Anyone have any idea how i can solve this?

Hi! A couple of questions. First, did you try following the directions in that error, particularly the bolded one?

• Check the Storybook build log printed below.
• Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
• Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Second, if those directions don't address your problem, it's probably better to open a new issue rather than comment on this closed one, unless you're confident that your issue is caused by the fix detailed here not actually working.

[akhilgopalv14]

Hi Guys,

I'm trying to run Chromatic on premises outside the Git referring the document - How to continue setup if you require SSO, on-premises, or have a different Git provider.

But when running the project token command, getting below error:

Chromatic CLI v6.5.1
https://www.chromatic.com/docs/cli

√ Authenticated with Chromatic
→ Using project token '********d03e'
× Retrieving git information
→ Chromatic only works from inside a Git repository.
Collect Storybook metadata
Build Storybook
Publish your built Storybook
Verify your Storybook
Test your stories

× Failed to retrieve git information
× Unable to execute command: git --no-pager log -n 1 --format="%H ## %ct ## %ae ## %an"
Chromatic only works from inside a Git repository.
→ View the full stacktrace below

If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
You can also email the team at support@chromatic.com if chat is not an option.

Please provide us with the above CLI output and the following info:
{}.

Any idea what I'm not able to proceed with a separate chromatic account ?

[kylegach]

@akhilgopalv14 — That issue is unrelated to this one, and is best resolved by chatting with us via the link in that error message.

That said, I'm not sure Chromatic can be run on-premises, as it needs access to your project's git history to properly take snapshots and calculate baselines.

[aaronjones1]

I had this issue and was able to resolve it by deleting all of my empty assets folders and their corresponding references in .storybook/main.js and ng-package.json.

Details

Angular v13.3.7
Storybook v6.5.4

I didn't receive any errors when building Storybook outside of the Github workflow, so I isolated the storybook build in the Github workflow and that yielded more descriptive errors, which allowed me to correct them.

Build error fixes

The Storybook build threw an error for all of my assets folders that were empty. I deleted those folders and removed their references from .storybook/main.js and ng-package.json and the build succeeded.

Working yml

I don't know why the Storybook build behavior is different in the Github action. After resolving the errors I was able to remove the isolated Storybook build run step and everything worked fine.

Here is my working workflow file:

name: 'Chromatic Dev'

on:
  push:
    branches:
      - dev

defaults:
  run:
    working-directory: buoy-workspace

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Install dependencies and build
        run: |
          npm ci
          npm run build-buoy
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          workingDir: buoy-workspace
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          exitZeroOnChanges: true

[alehar9320]

Had the same issue, but it was caused by that I was missing a script inside my package.json that was specifically named "build-storybook", that chromatic then failed to run. We're using Nx, with our own npm scripts, so we apparently didn't have the exact Storybook setup that the software has been designed for.

Managed to solve it by following the advice above, namely to run

npx chromatic --exit-zero-on-changes -d storybook-static/

Had the same issue, caused by that a script for building Storybook called "build-storybook" wasn't present. Managed to get past it by using the command suggested in the quoted comment. Then adding a script with the explicit name in that branch's pull request