GitHub Action TurboSnap fails with Storybook 8.2.9

[MoritzWeber0]

Bug report

When I enable TurboSnap in my GitHub Actions pipeline, the build starts failing with the following output:

Run chromaui/action@latest

Chromatic CLI v11.7.0
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '****************a3af'
Retrieving git information

ℹ Missing commit detected
When detecting git changes for TurboSnap, we couldn't find the commit ([6](https://github.com/DSD-DBS/capella-collab-manager/actions/runs/10698776349/job/29658913669?pr=1746#step:6:7)59559c) for the most recent build (#383).
To avoid re-snapshotting stories we know haven't changed, we copied from the most recent build (#382) that did have a commit (edb9813) instead.
Found 3 changed files:
  .github/workflows/storybook.yml
  frontend/src/app/general/404/404.component.html
  frontend/test.txt
Retrieved git information
    → Commit '32e2a86' on branch 'storybook-indication'; found 2 parent builds and 3 changed files
Collecting Storybook metadata
Collected Storybook metadata
    → Storybook 8.2.9 for Angular; using the @storybook/angular builder (8.2.9); supported addons found: Links, Essentials, Interactions
Initializing build
Initialized build
    → Build 385 initialized
Building your Storybook
    → Running command: npm run build-storybook -- --output-dir /tmp/chromatic--18[7](https://github.com/DSD-DBS/capella-collab-manager/actions/runs/10698776349/job/29658913669?pr=1746#step:6:8)8-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--1[8](https://github.com/DSD-DBS/capella-collab-manager/actions/runs/10698776349/job/29658913669?pr=1746#step:6:9)78-fuF32LhmrRvY
    → [*                   ]
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 build-storybook -- --output-dir /tmp/chromatic--1878-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--1878-fuF32LhmrRvY
Error: Unknown argument: /tmp/chromatic--1878-fuF32LhmrRvY

ℹ Build command:
npm run build-storybook -- --output-dir /tmp/chromatic--1878-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--1878-fuF32LhmrRvY

ℹ Runtime metadata:
{
  "nodePlatform": "linux",
  "nodeVersion": "20.13.1",
  "packageManager": "npm",
  "packageManagerVersion": "[10](https://github.com/DSD-DBS/capella-collab-manager/actions/runs/10698776349/job/29658913669?pr=1746#step:6:11).7.0"
}

ℹ Storybook build output:
/home/runner/work/capella-collab-manager/capella-collab-manager/frontend/build-storybook.log

> [email protected] build-storybook
> ng run capellacollab:build-storybook --output-dir /tmp/chromatic--1878-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--[18](https://github.com/DSD-DBS/capella-collab-manager/actions/runs/10698776349/job/29658913669?pr=1746#step:6:19)78-fuF32LhmrRvY
    → Command failed: npm run build-storybook -- --output-dir /tmp/chromatic--1878-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--1878-fuF32LhmrRvY

I use the chromatic/action@latest step:

- name: Run Chromatic
  id: chromatic
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    workingDir: ./frontend
    onlyChanged: true

See also: https://github.com/DSD-DBS/capella-collab-manager/blob/main/.github/workflows/storybook.yml

In the build comment, it tries to pass --webpack-stats-json. This option doesn't seem to exist anymore in the latest Storybook version and --stats-json should be used instead: https://storybook.js.org/docs/api/cli-options

[cgbl-90]

hello @MoritzWeber0 yes, the --webpack-stats-json option was renamed to --stats-json. This error log indicates the flag could have been the issue:

Command failed with exit code 1: npm run build-storybook -- --output-dir /tmp/chromatic--1878-fuF32LhmrRvY --webpack-stats-json /tmp/chromatic--1878-fuF32LhmrRvY
Error: Unknown argument: /tmp/chromatic--1878-fuF32LhmrRvY

[MoritzWeber0]

Is there any workaround for this? Couldn't find any limitations that the Chromatic GitHub Action is not compatible with newer versions of Storybook. Thanks for checking 👍

EDIT: I guess that I have to use a prebuilt Storybook with the GH Action.

[MoritzWeber0]

The following workaround with a prebuilt Storybook seems to work:

- name: Build Storybook
  run: npx -p @angular/cli ng run capellacollab:build-storybook
  working-directory: ./frontend
- name: Run Chromatic
  id: chromatic
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    workingDir: ./frontend
    storybookBuildDir: ./storybook-static
    onlyChanged: true

[cgbl-90]

@MoritzWeber0 thanks for testing and sharing the workaround. We are investigating this issue.

[jmhobbs]

The --webpack-stats-json flag is still present in 8.0.0+, but not advertised in documentation(see storybookjs/storybook#26128).

I believe this is actually related to the Angular builder not working with --webpack-stats-json path. PR #1034 has been created to move to the more compatible --webpack-stats-json=path format.

We will additionally use --stats-json for Storybook 8.0.0+ in a followup PR #1035 (which will need to be reworked after the other merges)

[jmhobbs]

@MoritzWeber0 Chromatic v11.9.0 and the latest Action release should resolve that issue 👍

[jmhobbs]

PR #1035 switching to --stats-json has also merged, v11.10.1.

This should be fixed, let me know if it isn't!

[fgirardey]

I don't understand why this issue is considered has fixed, i use @storybook/angular in version 8.2.9 and my CI is now broken because chromaui/action@latest is now passing --stats-json which is an unknown flag of the Nx executor @storybook/angular:build-storybook. How can I fix this?

[cgbl-90]

Hey @fgirardey thanks for reporting this! Can you share more details with us? Send us an email to [email protected]