Getting "Failed to extract stories from your Storybook" error in CI
bkiac opened this issue · 20 comments
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",
}
I've been experiencing something similar. Just intermittent failing on the CI. When I run it again it seems to resolve itself.
@thafryer we stopped using chromatic because we couldn't figure out what's the issue
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?
Got the same thing thing going on at work. We've disabled Chromatic for the time being because of this bug.
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 storybookjs/storybook#21316 and storybookjs/storybook#21696 (this is for Angular although I see the same using React)
@baileyandy Thanks for sharing that and reaching out. @visualjeff, Does this fix work for you?
@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.
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: storybookjs/testing-library#8
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: [],
},
``` `
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"
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 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
withStorybook 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.
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.
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!
It does seem solveable, but I'm not confident sb upgrade
will put a repo in a usable state.
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
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?
@hackily @ronny1020 just wanted to make sure you both saw that this should be fixed in #858