chromatic-cli: building your Storybook fails (only with chromatic)

@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/

Why is this closed? The issue is still here

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

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.

https://github.com/chromaui/chromatic-cli/blob/7710e62fdaf7c5296ae94cc192c125710483dc81/bin/tasks/build.js#L46-L69

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

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.

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.

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

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

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.

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

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.

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!

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

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

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

Same.

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.