storybook: Improve error reporting for duplicate story definitions

Describe the bug This is for a pnpm monorepo project migrating from 7.0.0-alpha.10 webpack React (which works perfectly) to 7.0.0-alpha.28 with the Vite framework. I get the following error when storyStoreV7 is true:

The console shows:

Error: Duplicate stories with id: components-icon--default
    at StoryIndexGenerator.chooseDuplicate (/Users/robertniznik/code/launchdarkly/launchpad-ui/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.28_szel5ggy6oiqgqxwc4a6yc2j34/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:351:44)
    at /Users/robertniznik/code/launchdarkly/launchpad-ui/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.28_szel5ggy6oiqgqxwc4a6yc2j34/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:390:36
    at Array.forEach (<anonymous>)
    at StoryIndexGenerator.sortStories (/Users/robertniznik/code/launchdarkly/launchpad-ui/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.28_szel5ggy6oiqgqxwc4a6yc2j34/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:386:17)
    at StoryIndexGenerator.getIndex (/Users/robertniznik/code/launchdarkly/launchpad-ui/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.28_szel5ggy6oiqgqxwc4a6yc2j34/node_modules/@storybook/core-server/dist/cjs/utils/StoryIndexGenerator.js:415:29)
    at async /Users/robertniznik/code/launchdarkly/launchpad-ui/node_modules/.pnpm/@storybook+core-server@7.0.0-alpha.28_szel5ggy6oiqgqxwc4a6yc2j34/node_modules/@storybook/core-server/dist/cjs/dev-server.js:119:24

I validated that the same error appears for @storybook/react-webpack5 past version 7.0.0-alpha.10. Not sure how to proceed as nothing was changed besides bumping the alpha version.

System System: OS: macOS 12.5.1 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 16.15.0 - /usr/local/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.5.5 - /usr/local/bin/npm Browsers: Chrome: 105.0.5195.52 Firefox: 104.0.1 Safari: 15.6.1 npmPackages: @storybook/addon-a11y: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-actions: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-backgrounds: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-docs: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-essentials: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-highlight: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-interactions: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-measure: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addon-outline: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/addons: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/api: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/channel-postmessage: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/channel-websocket: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/cli: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/client-api: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/client-logger: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/components: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/core-client: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/core-events: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/preview-web: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/react: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/react-vite: ^7.0.0-alpha.28 => 7.0.0-alpha.28 @storybook/testing-library: ^0.0.13 => 0.0.13 @storybook/theming: ^7.0.0-alpha.28 => 7.0.0-alpha.28

Additional context Stories are written in CSF3.

About this issue

Original URL
State: open
Created 2 years ago
Comments: 25 (17 by maintainers)

Most upvoted comments

So I was able to re-enable storyStoreV7 by using a stricter custom regex for the stories:

const fg = require('fast-glob');

const getStories = () =>
  fg.sync([path.resolve(__dirname, `../packages/**/stories/*.stories.tsx`), '!**/node_modules']);

module.exports = {
  stories: async () => [...getStories()],

It seems past 7.0.0-alpha.10 Storybook was also capturing the stories of linked packages in the pnpm workspace. For example, our modal package depends on the button package. It gets linked and included in the modal’s node_modules so technically the button’s stories are in scope to get pulled in. That explains the duplicate stories error and why a stricter regex fixes things.

Niznikr on Sep 6, 2022

@yuri-scarbaci-lenio, are you using a similar project structure to https://github.com/storybookjs/storybook/issues/19094#issuecomment-1238200500, where stories from linked packages are being included?

If not, I would suggest searching through your stories for two of them using the same title of hooks.

Maybe you can describe your project structure a bit?

IanVS on Nov 23, 2022

Correct it is a result of symlinks via pnpm workspaces
Yeah I only know that starting in alpha.12 I get the TypeError: Failed to fetch error and using the custom glob that ignores node_modules fixes things

Niznikr on Sep 8, 2022

It started in 7.0.0-alpha.12

Niznikr on Sep 7, 2022

Sure @IanVS I can narrow down where it started. So cool to hear you’re in the area! I’m usually at a RoosRoast, Hyperion, or some other coffee shop in the morning 😛 Would be fun to chat sometime.

Niznikr on Sep 7, 2022

To be clear, it seemed to match the individual node_modules of each package, not the root node_modules.

Niznikr on Sep 6, 2022

Hi @IanVS! I will try to get a minimal reproduction for you tomorrow. I have confirmed that I don’t have multiple stories with the same title. It even happens when I update the regex to target a single story.

Niznikr on Sep 5, 2022