使用 github-actions 时出现彩色部署错误

如何解决使用 github-actions 时出现彩色部署错误

我正在开发一个使用故事书的 React 项目，我正在尝试使用 GitHub 操作将此故事书发布到 chromium 中。我正在使用他们的示例 chromatic.yml，只需进行一些更改即可满足我的项目需求。运行 chromo-cli 我的故事书已成功部署，但是当我使用 GitHub 操作时，会显示以下错误：

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

这是完整的错误日志：

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 [e-mail] 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)

这是我的chromatic.yml

# Workflow name
name: "chromatic Deployment"

# Event for the workflow
on:
  push:
    branches: [master,stagging,developing]
  pull_request:
    branches: [master,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 }}

解决方法

所以这是我在 chrom 的官方存储库中找到的内容：

• https://github.com/chromaui/chromatic-cli/issues/227
• https://github.com/chromaui/chromatic-cli/issues/324
• https://github.com/chromaui/chromatic-cli/issues/197

这个问题可能源于我使用的是 monorepo，我虽然使用 working-directory 足以解决这个问题，但还有一个额外的参数要使用 chromaui,workinDir。>

这是我目前的 chromatic.yml

# Workflow name
name: "Chromatic Deployment"

# Event for the workflow
on:
  push:
    branches: [master,stagging,developing]
  pull_request:
    branches: [master,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 }}