GitHub action chromaui/action fails when TurboSnap is enabled on Angular 16 project.

[jaichinger]

Bug report

Hi there. It appears the Angular CLI has changed in Angular 16, causing the action to fail when it attempts to do a TurboSnap build. The CLI option --webpack-stats-json is now just a boolean switch, instead expecting a path into which the stats json is output.

The action fails with the following message:

Error: Unknown argument: /tmp/chromatic--1801-cZKLoYmDt3ST
    → Command failed: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1801-cZKLoYmDt3ST --webpack-stats-json /tmp/chromatic--1801-cZKLoYmDt3ST
Error: non-zero exit code

In version 16 with the --webpack-stats-json option specified, the stats json is just stored in the --output-dir directory into preview-stats.json.

This command runs successfully:

npm run --silent build-storybook -- --output-dir /var/folders/_6/p3mp3tds7yg6_q82t73511wc0000gn/T/chromatic--36175-goVQziwhEFR7 --webpack-stats-json

Thanks in advance. James.

[valentinpalkovic]

Hi @jaichinger,

We are aware of this issue and it has to do something about how Angular interprets CLI flags. Unfortunately, if key/value pairs are separated by an empty space instead of =, Angular will not interpret the value correctly.

You can follow a workaround, though. You must prebuild Storybook and tell Chromatic where to find the output folder. Additionally, we will pass angular the webpack-stats-json flag via builder options.

1. Go to your angular.json and add the webpackStatsJson: true option to your build-storybook configuration.

{
  ...
  "projects": {
    ...
    "your-project": {
      ...
      "architect": {
        ...
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            ...
            "webpackStatsJson": true
          }
        }
      }
    }
  }
}

2. Adjust your CI to first build Storybook manually (npm run --silent build-storybook) and then call Chromatics CLI. Tell the CLI where the output folder of Storybook is:

chromatic --only-changed --storybook-build-dir <output-folder>

Hopefully, this helps!

[jaichinger]

Hi @valentinpalkovic,

Ah, okay, got it. Thanks for the explanation, and thanks for the workaround 👍

Cheers,
James.