Turbosnap fails to upload the Storybook build

[torztomasz]

Hey, I have started using your plugin to turn on my project's turbosnap feature of chromatic. Unfortunately, after running chromatic in CI it produces this error:

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

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '********************'
Retrieving git information
Found 3 changed files:
  .github/workflows/chromatic.yml
  packages/frontend/package.json
  packages/frontend/src/components/Tabs.tsx
Retrieved git information
    → Commit 'f0f5545' on branch 'bring-back-viz-reg'; found 1 parent build and 3 changed files
Collecting Storybook metadata
Collected Storybook metadata
    → ; no supported addons found
Initializing build
Initialized build
    → Build 44 initialized
Building your Storybook
    → Running command: yarn run storybook:build --output-dir /tmp/chromatic--2038-Bmbz7mRY2y1C --webpack-stats-json /tmp/chromatic--2038-Bmbz7mRY2y1C
    → [*                   ]
    → [ *                  ]
    → [  *                 ]
    → [   *                ]
    → [    *               ]
    → [     *              ]
    → [      *             ]
    → [       *            ]
    → [        *           ]
Storybook built in 1 minute 28 seconds
    → View build log at /home/runner/work/l2beat/l2beat/packages/frontend/build-storybook.log
Publish your built Storybook
    → Validating Storybook files
Retrieving story files affected by recent changes
    → Traversing dependencies for 3 files that changed since the last build
Could not retrieve dependency changes from lockfiles; checking package.json
Failed to retrieve dependent story files
    → Could not retrieve dependent story files.
a.map is not a function
✖ Failed to publish your built Storybook

Could not retrieve dependent story files.
a.map is not a function
→ 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:
{
  "timestamp": "2023-10-25T20:26:09.439Z",
  "sessionId": "814664a5-199c-402d-a9ba-f6cda197113c",
  "gitVersion": "2.42.0",
  "nodePlatform": "linux",
  "nodeVersion": "16.20.2",
  "packageManager": "yarn",
  "packageManagerVersion": "1.22.19",
  "packageName": "chromatic",
  "packageVersion": "7.5.0",
  "storybook": {
    "configDir": "",
    "staticDir": ""
  },
  "flags": {
    "allowConsoleErrors": false,
    "buildScriptName": "storybook:build",
    "exitOnceUploaded": true,
    "exitZeroOnChanges": true,
    "interactive": false,
    "onlyChanged": true,
    "projectToken": "***",
    "uploadMetadata": false,
    "zip": false,
    "junitReport": false
  },
  "configuration": {},
  "buildScript": "(cd ../.. && wsrun -p @l2beat/{shared-pure,config} -recsm build --module es6) && storybook build",
  "buildCommand": "yarn run storybook:build --output-dir /tmp/chromatic--2038-Bmbz7mRY2y1C --webpack-stats-json /tmp/chromatic--2038-Bmbz7mRY2y1C",
  "exitCode": 0,
  "exitCodeKey": "OK",
  "errorType": "TypeError",
  "errorMessage": "✖ Failed to publish your built Storybook",
  "build": {
    "id": "6539789cd23f4cb6c8e9e150",
    "number": 43
  }
}

TypeError: ✖ Failed to publish your built Storybook
Could not retrieve dependent story files.
a.map is not a function
    at GIt (/home/runner/work/_actions/chromaui/action/v1/action/register.js:999:583)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async zbi (/home/runner/work/_actions/chromaui/action/v1/action/register.js:1285:[48](https://github.com/l2beat/l2beat/actions/runs/6645749380/job/18057736321?pr=2095#step:4:49)9)
    at async FZ.task (/home/runner/work/_actions/chromaui/action/v1/action/register.js:293:12[71](https://github.com/l2beat/l2beat/actions/runs/6645749380/job/18057736321?pr=2095#step:4:72)7)
Error: non-zero exit code

I have read some GitHub issues regarding the same error but these ones claim that Webpack is a problem so I thought you may have some advice on how to solve the problem.

[IanVS]

Can you try building your storybook separately, then providing the built files to Chromatic using --storybook-build-dir?

[IanVS]

Did this only start happening once you added this plugin? Can you share your .storybook/main.ts?

[torztomasz]

Can you try building your storybook separately, then providing the built files to Chromatic using --storybook-build-dir?

Sure, will do that in a minute.

Did this only start happening once you added this plugin? Can you share your .storybook/main.ts?

Well, I assumed that if I am using the vite with storybook then I need to use your plugin as without it I would not have the JSON file needed for Turbosnap to work. And yup, the errors started appearing when I added the plugin and configured it.
There is a link to the commit that started messing up the upload: commit. You can check other commits but there is a mess cuz I was trying to solve it 😅

Anyway, the build always fails to upload if I turn on the onlyChanged flag on Chromatic. If I do not configure your plugin then it yells that no JSON is present and if I configure the plugin then it shows the error above.

[torztomasz]

Can you try building your storybook separately, then providing the built files to Chromatic using --storybook-build-dir?

Okay, I have just locally done what you suggested and everything works. So I decided to enable the CI and it turns out it failed. The only difference I can see is that I run chromatic command inside packages/frontend directory and the CI runs it from the root folder.

[torztomasz]

Update:

I have made it work. I stopped using @chromaui/action and instead, I am doing the build and publishing manually. So, probably it is the action issue and this plugin is working correctly. You can see the change here. I thought that maybe I made some typo in @chromaui/action configuration but have not found anything like that.

[IanVS]

Great, thanks for sharing!