Using conditional statements in the default export CSF format.

[mikokofuyu]

Describe the bug

I am trying to use an environment variable to change the excludedStories property in the default export. But it causes the story to fail to build.

The following solutions do not work.

// handling the conditional in-line

export default {
    title: 'Atoms/Button',
    component: Button,
    excludeStories: isVisualTestingMode ? ['SecondaryButton', 'PlayButton'] : [];
};

// Handling the conditional in a const

const excludeStories = isVisualTestingMode ? ['SecondaryButton', 'PlayButton'] : [];

export default {
    title: 'Atoms/Button',
    component: Button,
    excludeStories: excludeStories
};

However I did manage to get a very odd solution to work (see below) this leads me to believe there is some issue with how the default export handles conditionals?

const objectOfStuff = { title: 'Atoms/Button', component: Button };

if (isVisualTestingMode) {
    objectOfStuff.excludeStories = ['SecondaryButton', 'PlayButton'];
}

export default objectOfStuff;

[hewelt]

Something like this would be really useful in my case too, where I'd like certain stories to be captured by Chromatic but not present in the sidebar 👍🏻

[mikokofuyu]

Update I think upgrading to v6.5 actually breaks the hacky workaround solution I found too. So it would be really good to get this looked into.

[shilman]

RFC here: #25535

Implementation here: #25328

You can use two different config files depending on which environment you're in