Cannot run a build with no stories.

[Th3S4mur41]

I have deployed multiple storybooks for various packages and would like to bring them all together using composition.

I have therefore created an additional repo/storybook, that only contains some information (Introduction, changelogs, references, ...) in form of mdx files and references the other storybooks in the main.js.

While the local build works fine, deploying to chromatic fails with the following error:

Run chromaui/action@v1

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

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '****************c41f'
Retrieving git information
Retrieved git information
    → Commit 'd501bb3' on branch 'main'; no ancestor found
Collecting Storybook metadata
Collected Storybook metadata
    → ; no supported addons found
Initializing build
Initialized build
    → Build 8 initialized
Publish your built Storybook
    → Validating Storybook files
Publishing your built Storybook
    → Retrieving target location
    → Starting publish
    → [                    ] 2%
Publish complete in [10](https://github.com/***/docs/actions/runs/5290253165/jobs/9574351182#step:8:11) seconds
    → View your Storybook at https://6489d79[12](https://github.com/***/docs/actions/runs/5290253165/jobs/9574351182#step:8:13)88[15](https://github.com/***/docs/actions/runs/5290253165/jobs/9574351182#step:8:16)***zdf.chromatic.com
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 https://***791[28](https://github.com/***/docs/actions/runs/5290253165/jobs/9574351182#step:8:29)***zdf.chromatic.com
The following error was encountered while running your Storybook:

Cannot run a build with no stories. Please add some stories!
    → Failed to publish build
Error: non-zero exit code

I'd like to avoid being force to create a dummy story just to be able to deploy this one

[thafryer]

Hi @Th3S4mur41! Thanks for reaching out! Can you send us a reproduction or more details of your setup? Are these repositories available to look at?

[Th3S4mur41]

Hey @thafryer, unfortunately, this is not a public repo...

But it is very minimalistic.

I just created a new repo and initialized Storybook 7 with web components and vite. Then removed everything from the stories folder except for the Introduction.mdx

Then I adapted the main.js to enable composition

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    features: {
        buildStoriesJson: true,
        modernInlineRender: true,
        storyStoreV7: true
    },
    framework: {
        name: '@storybook/web-components-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    },
    refs: {
        web: {
            title: 'lib',
            url: 'https://main--***182.chromatic.com/'
        }
    }
};
export default config;

For the deployment, I build storybook with storybook build -o dist then deploy to chomatic with the following action settings:

      - name: '🚀 Deploy'
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: dist
          zip: true
          exitOnceUploaded: true

Is there anything else I can provide, that would help you with this?

[work933k]

I'm also using Storybook Composition, but don't have the issue you are having. This as i created a mdx-story as a landingpage with instructions for users.

[Th3S4mur41]

@work933k I just tried to remove my dummy story, hoping that maybe a storybook update fixed it, but still seing the same issue... I double checked to make sure UI Review and Visual tests are disabled on chromatic side. Still no success. Do you maybe use other options like skip or something when uploading?

[ghengeveld]

Chromatic has a hardcoded check that requires at least one story to be present in your Storybook, even if you don't run UI Tests or UI Review. Composed stories aren't considered part of the published Storybook. This is a sanity check to ensure your Storybook loads correctly. Having a Storybook without stories is usually a sign of a misconfigured stories glob. The workaround is to always have a simple dummy story in there.

[Th3S4mur41]

@ghengeveld in our case we have some .mdx pages in this Storybook, but no story since there is no component in it. Is there a way to have chromatic consider those .mdx pages as stories? This seems to be what @work933k is suggesting.

[ghengeveld]

You could setup a bare welcome.stories.js like so:

export default {
  title: "Welcome",
  render: () => null,
}

export const Welcome = {}

I think this would work.

[Th3S4mur41]

Unfortunately not, this is what storybook renders with that code.

Expecting an HTML snippet or DOM node from the story: "Welcome" of "Welcome". Did you forget to return the HTML snippet from the story? Use "() => " or when defining the story.

[ghengeveld]

Yeah okay, it's not allowed to return null from render. If you use React (and import it) then you can do render: () => <div/> or something similar.