Getting "Failed to extract stories from your Storybook" error in CI

[bkiac]

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",
}

[ghost]

I've been experiencing something similar. Just intermittent failing on the CI. When I run it again it seems to resolve itself.

[thafryer]

@bkiac @ghost Sorry for the lack of response here. Have either of you experienced this issue recently? I think this might have been an intermittent issue at the time, which we have since then resolved.

[bkiac]

@thafryer we stopped using chromatic because we couldn't figure out what's the issue

[baileyandy]

I have just encountered this issue whilst upgrading Storybook 6.5.15 -> 7.2.3 and Chromatic 5.2.0 -> 6.21.0

Everything seemed fine until Chromatic got to the Verifying Storybook stage

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.

The following error was encountered while running your Storybook:

Error: page.evaluate: TypeError: fileName.match is not a function

Debugging on the site, it looks like it is failing here

addStoriesFromExports(fileName, fileExports) {
    if (fileName.match(/\.mdx$/) && !fileName.match(/\.stories\.mdx$/) && scope.FEATURES?.storyStoreV7MdxErrors !== !1)

because in my case fileName is a number - 66094 (value irrelevant) and <number>.match is not a function.

Any known workarounds please?

[visualjeff]

Got the same thing thing going on at work. We've disabled Chromatic for the time being because of this bug.

[baileyandy]

tl;dr storyStoreV7: true fixed this for me

I had initially set

const storybookConfig: StorybookConfig = {
    features: {
        storyStoreV7: false
    }
    // more config
}

as I was having some other issues, which I had (incorrectly) attributed to this new v7 change.

However, using the default true I am not seeing this issue any more. For me, moving to the v7 store also fixed the other issues I have seen, namely https://github.com/storybookjs/storybook/issues/21316 and https://github.com/storybookjs/storybook/issues/21696 (this is for Angular although I see the same using React)

[thafryer]

@baileyandy Thanks for sharing that and reaching out. @visualjeff, Does this fix work for you?

[thafryer]

@bkiac I would love to help you re-enable Chromatic in your team's workflow. Please let me know how I can help in any way.

[visualjeff]

So we made some progress. We finally figured out that Storybook7/Vite builder is having a problem with @storybook/testing-library. It causes a ignoredException and there is an open defect for this. None of which is problem with the Chromatic CLI other than the ignoredException causes the Chromatic validation to fail. Here is the open defect: https://github.com/storybookjs/testing-library/issues/8

[hamidrezahanafi]

I had exact same issue with storybook 7 I had minimize disabled on my webpack configuration, removed following code from web pack config on main.ts and working now

      optimization: {
        minimize: false,
        minimizer: [],
      },
``` `

[ianwremmel]

I seem to be running into a similar (but perhaps opposite) issue to @baileyandy. If I specify storyStoreV7: true or omit storyStoreV7, I get the following error:

✖ 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 https://62911a8fe23893003a9b5d0a-tygbihqfcb.chromatic.com
The following error was encountered while running your Storybook:

Error: page.evaluate: Error: Didn't find 'atoms-hyperlink--link' in CSF file, this is unexpected
    at StoryStore.storyFromCSFFile (https://62911a8fe23893003a9b5d0a-tygbihqfcb.capture.chromatic.com/sb-preview/runtime.js:47:10147)
    at https://62911a8fe23893003a9b5d0a-tygbihqfcb.capture.chromatic.com/sb-preview/runtime.js:47:11966
    at Array.reduce (<anonymous>)
    at StoryStore.extract (https://62911a8fe23893003a9b5d0a-tygbihqfcb.capture.chromatic.com/sb-preview/runtime.js:47:11845)
    at PreviewWeb.extract (https://62911a8fe23893003a9b5d0a-tygbihqfcb.capture.chromatic.com/sb-preview/runtime.js:103:199)
    at async <anonymous>:217:30

If I use the following config, however, it succeeds.

  features: {
    interactionsDebugger: true,
    storyStoreV7: false
  },

I'm using chromatic@7.4.0 with storybook 7:

    "@storybook/addon-a11y": "^7.5.1",
    "@storybook/addon-actions": "^7.5.1",
    "@storybook/addon-essentials": "^7.5.1",
    "@storybook/addon-interactions": "^7.5.1",
    "@storybook/addon-links": "^7.5.1",
    "@storybook/react": "^7.5.1",
    "@storybook/react-webpack5": "^7.5.1",
    "@storybook/test-runner": "^0.13.0",
    "@storybook/testing-library": "^0.2.2",
    "storybook": "^7.5.1"

[TomRadford]

Seems like I'm experiencing a similar issue to @ianwremmel

When storyStoreV7 is true, I'm getting:

✖ 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 https://x.chromatic.com
The following error was encountered while running your Storybook:

Error: page.evaluate: TypeError: Cannot destructure property 'story' of 'storyObject' as it is undefined.
    at normalizeStory (https://x.capture.chromatic.com/sb-preview/runtime.js:38:260)
    at https://x.capture.chromatic.com/sb-preview/runtime.js:41:400
    at Array.forEach (<anonymous>)
    at processCSFFile (https://x.capture.chromatic.com/sb-preview/runtime.js:41:354)
    at StoryStore.memoizerific [as processCSFFileWithCache] (https://x.capture.chromatic.com/sb-preview/runtime.js:1:4751)
    at https://x.capture.chromatic.com/sb-preview/runtime.js:47:8451

When I set my Storybook config to be:

  features: { storyStoreV7: false },

the build succeeds - albeit with some console errors:

✖ Encountered 24 build errors: failing with exit code 2
Pass --allow-console-errors to succeed this command regardless of runtime build errors.
ℹ Review the errors at https://www.chromatic.com/build?appId=x&number=172

thus although it fails due to some console errors (missing property on some of my mock data), I still get a published build.

I'm on chromatic@7.5.0 with Storybook 7 and Svelte:

    "storybook": "^7.5.1",
    "@storybook/addon-essentials": "^7.5.1",
    "@storybook/addon-interactions": "^7.5.1",
    "@storybook/addon-links": "^7.5.1",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/addon-svelte-csf": "^4.0.9",
    "@storybook/blocks": "^7.5.1",
    "@storybook/jest": "^0.2.3",
    "@storybook/svelte": "^7.5.1",
    "@storybook/sveltekit": "^7.5.1",
    "@storybook/testing-library": "^0.2.2",

[TomRadford]

Seems like I'm experiencing a similar issue to @ianwremmel

When storyStoreV7 is true, I'm getting:

✖ 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 https://x.chromatic.com
The following error was encountered while running your Storybook:

Error: page.evaluate: TypeError: Cannot destructure property 'story' of 'storyObject' as it is undefined.
    at normalizeStory (https://x.capture.chromatic.com/sb-preview/runtime.js:38:260)
    at https://x.capture.chromatic.com/sb-preview/runtime.js:41:400
    at Array.forEach (<anonymous>)
    at processCSFFile (https://x.capture.chromatic.com/sb-preview/runtime.js:41:354)
    at StoryStore.memoizerific [as processCSFFileWithCache] (https://x.capture.chromatic.com/sb-preview/runtime.js:1:4751)
    at https://x.capture.chromatic.com/sb-preview/runtime.js:47:8451

When I set my Storybook config to be:

  features: { storyStoreV7: false },

the build succeeds - albeit with some console errors:

✖ Encountered 24 build errors: failing with exit code 2
Pass --allow-console-errors to succeed this command regardless of runtime build errors.
ℹ Review the errors at https://www.chromatic.com/build?appId=x&number=172

thus although it fails due to some console errors (missing property on some of my mock data), I still get a published build.

I'm on chromatic@7.5.0 with Storybook 7 and Svelte:

    "storybook": "^7.5.1",
    "@storybook/addon-essentials": "^7.5.1",
    "@storybook/addon-interactions": "^7.5.1",
    "@storybook/addon-links": "^7.5.1",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/addon-svelte-csf": "^4.0.9",
    "@storybook/blocks": "^7.5.1",
    "@storybook/jest": "^0.2.3",
    "@storybook/svelte": "^7.5.1",
    "@storybook/sveltekit": "^7.5.1",
    "@storybook/testing-library": "^0.2.2",

Seems like this was a silly issue from my side how I was mocking the SvelteKit page store as well as some missing imports. A deeper dive into debugging each of my stories solved the issue.

[ianwremmel]

I did end up getting around this, but I don't really know what the fix was. The project was small enough and I had enough peer conflicts that it ended up being easier to effectively start the project from scratch (and copy a bunch of files back). At this point, every package is up to date and everything works now.

[skitterm]

Hi folks, it looks like this issue has been solved by moving to storyStore v7 and imports/dependency clarity. @ianwremmel and others, feel free to reopen if you see this cropping up again in a specific instance!

[ianwremmel]

It does seem solveable, but I'm not confident sb upgrade will put a repo in a usable state.

[hackily]

I just started getting this issue - using the chromaui/action@v1 action. I was uploading fine, and then I made an innocuous readme.md change and now I am failing every chromatic upload

The following error was encountered while running your Storybook:

Cannot destructure property 'provider' of 'undefined' as it is undefined.

Output of npx envinfo --npmPackages

  npmPackages:
    @babel/cli: ^7.22.5 => 7.22.9 
    @babel/core: ^7.22.5 => 7.22.9 
    @babel/preset-env: ^7.22.5 => 7.22.9 
    @babel/preset-react: ^7.22.5 => 7.22.5 
    @babel/preset-typescript: ^7.22.5 => 7.22.5 
    @storybook/addon-a11y: ^7.1.0 => 7.1.0 
    @storybook/addon-controls: ^7.1.0 => 7.1.0 
    @storybook/addon-docs: ^7.4.6 => 7.4.6 
    @storybook/addon-essentials: ^7.1.0 => 7.1.0 
    @storybook/addon-interactions: ^7.1.0 => 7.1.0 
    @storybook/addon-links: ^7.1.0 => 7.1.0 
    @storybook/addon-react-native-web: ^0.0.21 => 0.0.21 
    @storybook/blocks: ^7.1.0 => 7.1.0 
    @storybook/jest: ^0.1.0 => 0.1.0 
    @storybook/react: ^7.1.0 => 7.1.0 
    @storybook/react-vite: ^7.1.0 => 7.1.0 
    @storybook/test-runner: ^0.11.0 => 0.11.0 
    @storybook/testing-library: ^0.2.0 => 0.2.0 
    @tamagui/animations-css: ^1.74.13 => 1.74.13 
    @tamagui/animations-react-native: 1.74.8 => 1.74.8 
    @tamagui/build: 1.74.8 => 1.74.8 
    @tamagui/core: 1.74.8 => 1.74.8 
    @tamagui/lucide-icons: 1.74.8 => 1.74.8 
    @tamagui/react-native-media-driver: 1.74.8 => 1.74.8 
    @tamagui/shorthands: 1.74.8 => 1.74.8 
    @tamagui/themes: 1.74.8 => 1.74.8 
    @tamagui/vite-plugin: 1.74.8 => 1.74.8 
    @tamagui/web: 1.74.8 => 1.74.8 
    @testing-library/jest-dom: ^5.16.5 => 5.17.0 
    @testing-library/react: ^14.0.0 => 14.0.0 
    @testing-library/user-event: ^14.4.3 => 14.4.3 
    @types/jest: ^29.5.2 => 29.5.3 
    @typescript-eslint/eslint-plugin: ^5.60.0 => 5.62.0 
    @typescript-eslint/parser: ^5.60.0 => 5.62.0 
    chromatic: ^9.0.0 => 9.0.0 
    eslint: ^8.43.0 => 8.45.0 
    eslint-config-airbnb: 19.0.4 => 19.0.4 
    eslint-config-airbnb-typescript: ^17.0.0 => 17.1.0 
    eslint-config-prettier: ^8.8.0 => 8.8.0 
    eslint-plugin-import: ^2.27.5 => 2.27.5 
    eslint-plugin-jest: ^27.2.2 => 27.2.3 
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.8.0 
    eslint-plugin-prettier: ^4.2.1 => 4.2.1 
    eslint-plugin-react: ^7.32.2 => 7.33.0 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
    eslint-plugin-storybook: ^0.6.12 => 0.6.13 
    eslint-plugin-testing-library: ^5.11.0 => 5.11.0 
    jest: ^29.5.0 => 29.6.1 
    jest-environment-jsdom: ^29.5.0 => 29.6.1 
    prettier: 2.8.8 => 2.8.8 
    prop-types: ^15.8.1 => 15.8.1 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-native-mask-input: ^1.2.3 => 1.2.3 
    react-native-svg: ^13.11.0 => 13.13.0 
    react-native-svg-web: ^1.0.9 => 1.0.9 
    react-native-web: 0.19.5 => 0.19.5 
    storybook: ^7.1.0 => 7.1.0 
    tamagui: 1.74.8 => 1.74.8 
    ts-jest: ^29.1.0 => 29.1.1 
    typescript: ^5.1.3 => 5.1.6 
    vite: ^4.3.9 => 4.4.5 

[ronny1020]

I just started getting this issue - using the chromaui/action@v1 action. I was uploading fine, and then I made an innocuous readme.md change and now I am failing every chromatic upload

The following error was encountered while running your Storybook:

Cannot destructure property 'provider' of 'undefined' as it is undefined.

I just get the same error. It worked properly yesterday with the same version and setting.

I tried to update to the last version "storybook": "^7.5.3" and "chromatic": "^9.0.0" and still get the same error.

Besides, it's not just happening on the chromaui/action@v1. It's also happening on the local chromaui CLI.

I also tried the storyStoreV7 setting but it's not fixed.

Should we reopen this issue or open a new issue?

[tevanoff]

@hackily @ronny1020 just wanted to make sure you both saw that this should be fixed in https://github.com/chromaui/chromatic-cli/issues/858

[hackily]

I see that, thank you @tevanoff I'm able to upload my stories successfully.