chromatic-cli: Getting "Failed to extract stories from your Storybook" error in CI

Bug report

I can’t publish certain projects to Chromatic. I have the exact same setup in a monorepo for two projects, one works fine (packages/ui), but the other (apps/web) always throws an error in the CI. Locally both of them work as expected.

Running apps/web package locally:

➜ npx chromatic --project-token=*** --build-script-name=storybook:build

Chromatic CLI v6.14.0
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token ***
  ✔ Retrieved git information
    → Commit '3578af3' on branch ***; found 1 parent build
  ✔ Collected Storybook metadata
    → ; no supported addons found
  ✔ Initialized build
    → Build 14 initialized
  ✔ Storybook built in 11 seconds
    → View build log at ***
  ✔ Publish complete in 15 seconds
    → View your Storybook at ***
  ✔ Published your Storybook
    → View build details at ***
  ↓ Test your stories [skipped]
    → No UI tests or UI review enabled

✔ Storybook published
We found 1 component with 5 stories.
ℹ View your Storybook at ***

Running apps/web in GitHub CI:

Run find . -type f -name "*.stories.tsx"
./src/components/peers/proof-action-modal/proof-action-modal.stories.tsx

Run chromaui/action@v1
Chromatic CLI v6.14.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
Retrieved git information
    → Commit ***; found 1 parent build
Collecting Storybook metadata
Collected Storybook metadata
    → ; no supported addons found
Initializing build
Initialized build
    → Build initialized
Building your Storybook
    → Running command: npm run --silent storybook:build -- --output-dir /tmp/chromatic--1871-4u4FWor5PnuJ
    → [*                   ]
    → [ *                  ]
    → [  *                 ]
    → [   *                ]
    → [    *               ]
    → [     *              ]
    → [      *             ]
    → [       *            ]
    → [        *           ]
    → [         *          ]
    → [          *         ]
Storybook built in 1 minute 44 seconds
    → View build log at ***
Publish your built Storybook
    → Validating Storybook files
Publishing your built Storybook
    → Retrieving target location
    → Starting publish
    → [                    ] 0%
Publish complete in 2 seconds
    → View your Storybook at ***
Verifying your Storybook
    → This may take a few minutes
    → [*                   ]
✖ Failed to extract stories from your Storybook
This is usually a problem with your published Storybook, not with Chromatic.

Build and open your Storybook locally and check the browser console for errors.
Visit your published Storybook at ***
    → Failed to publish build
The following error was encountered while running your Storybook:

Cannot run a build with no stories. Please add some stories!

The error is valid though, if I open the link there are no components in the Storybook build. I have no idea why they’re not picked up in the CI.

I have another project packages/ui, which works both locally and CI as expected.

This is my workflow file:

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize]

name: Storybook

jobs:
  ui:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1 # Need to use v1 because of Chromatic
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'yarn'
      - name: Install dependencies
        run: yarn
      - name: ???????????
        working-directory: packages/ui
        run: find . -type f -name "*.stories.tsx"
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_UI }}
          workingDir: packages/ui
          buildScriptName: storybook:build
  web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1 # Need to use v1 because of Chromatic
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'yarn'
      - name: Install dependencies
        run: yarn
      - name: ???????????
        working-directory: apps/web
        run: find . -type f -name "*.stories.tsx"
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_WEB }}
          workingDir: apps/web
          buildScriptName: storybook:build

This is the storybook main.js and preview.js from apps/web

// main.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
        fsCache: true,
      },
    },
  },
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@chakra-ui/storybook-addon'],
  typescript: {
    reactDocgen: false,
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [new TsconfigPathsPlugin()];
    return config;
  },
};

// preview.js
import { theme } from '../src/styles/theme';
import 'ui/fonts/hk-grotesk/index.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  chakra: {
    theme,
  },
};

and this is the storybook main.js, preview.js from packages/ui

// main.js
module.exports = {
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
        fsCache: true,
      },
    },
  },
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@chakra-ui/storybook-addon'],
  typescript: {
    reactDocgen: false,
  },
};

// preview.js
import { theme } from '../theme';
import '../fonts/hk-grotesk/index.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  chakra: {
    theme,
  },
};

Versions are the same in both projects:

{
  "@babel/core": "7.16.12",
    "@chakra-ui/storybook-addon": "1.0.1",
    "@storybook/addon-actions": "6.5.15",
    "@storybook/addon-essentials": "6.5.15",
    "@storybook/addon-links": "6.5.15",
    "@storybook/builder-webpack5": "6.5.15",
    "@storybook/manager-webpack5": "6.5.15",
    "@storybook/react": "6.5.15",
    "babel-loader": "8.2.3",
    "chromatic": "6.14.0",
    "tsconfig-paths-webpack-plugin": "4.0.0",
}