devopsgithub-actionsstorybookchromatic

Chromatic deployment error when using github-actions

I am working on a React project which is using storybook, I'm trying to publish this storybook into chromatic with GitHub actions. I am using their sample chromatic.yml with just a few changes to match my project needs. Running the chromatic-cli my storybook is desployed succesflly but when I use GitHub actions the following error is displayed:

Error: ✖ Failed to collect Storybook metadata
Could not find a supported Storybook viewlayer package. Make sure one is installed, or set CHROMATIC_STORYBOOK_VERSION.

Here's the full error log:

Run chromaui/action@v1
  with:
    projectToken: ***

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

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '********119f'
Retrieving git information
Retrieved git information
    → Commit 'a9f9af7' on branch 'master'; found 1 baseline commit
Collecting Storybook metadata
    → Could not find a supported Storybook viewlayer package. Make sure one is installed, or set CHROMATIC_STORYBOOK_VERSION.

✖ Failed to collect Storybook metadata
Could not find a supported Storybook viewlayer package. Make sure one is installed, or set CHROMATIC_STORYBOOK_VERSION.
→ 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": "2021-04-23T22:03:58.789Z",
  "sessionId": "2f736280-50df-4f2e-aa3d-00d90236cf61",
  "gitVersion": "2.31.1",
  "nodePlatform": "linux",
  "nodeVersion": "12.13.1",
  "packageName": "chromatic",
Error: non-zero exit code
  "packageVersion": "5.7.0",
  "flags": {
    "projectToken": "***",
    "fromCI": true,
    "interactive": false,
    "exitZeroOnChanges": true,
    "exitOnceUploaded": false,
    "allowConsoleErrors": false
  },
  "buildScript": "build-storybook",
  "errorType": "Error",
  "errorMessage": "✖ Failed to collect Storybook metadata"
}

Error: ✖ Failed to collect Storybook metadata
Could not find a supported Storybook viewlayer package. Make sure one is installed, or set CHROMATIC_STORYBOOK_VERSION.
    at /home/runner/work/_actions/chromaui/action/v1/bin/lib/getStorybookInfo.js:83:11
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async getStorybookInfo (/home/runner/work/_actions/chromaui/action/v1/bin/lib/getStorybookInfo.js:115:25)
    at async setStorybookInfo (/home/runner/work/_actions/chromaui/action/v1/bin/tasks/storybookInfo.js:6:42)
    at async Task.task (/home/runner/work/_actions/chromaui/action/v1/bin/lib/tasks.js:13:7)

And this is my chromatic.yml

# Workflow name
name: "Chromatic Deployment"

# Event for the workflow
on:
  push:
    branches: [master, stagging, developing]
  pull_request:
    branches: [master, stagging, developing]
# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: foo
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
Solution

  • So here's what I found on chromatic's official repository:

    There's a chance this problem originates from the fact I'm using a monorepo, I though using working-directory was enough to fix this but there an aditional parameter to be used chromaui, workinDir.

    Here's my current chromatic.yml

    # Workflow name
name: "Chromatic Deployment"

# Event for the workflow
on:
  push:
    branches: [master, stagging, developing]
  pull_request:
    branches: [master, stagging, developing]
# List of jobs
jobs:
  chromatic-deployment:
    # Operating System
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: foo
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          workingDir: foo
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}