Turbosnap fails to upload the Storybook build
torztomasz opened this issue · comments
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.
Can you try building your storybook separately, then providing the built files to Chromatic using --storybook-build-dir?
Did this only start happening once you added this plugin? Can you share your .storybook/main.ts?
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.
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.
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.
Great, thanks for sharing!