[Bug]: Unable to index files: Duplicate stories with id: example-button--primary

[shilman]

Describe the bug

It looks like somehow duplicate stories are getting generated in some user projects & causing indexing errors. Needs more investigation!

Examples:

• ./src/stories/Button.stories.ts,./src/stories/Button.stories.tsx
• ./src/stories/Button.stories.js,./src/stories/Button.stories.ts

To Reproduce

Unclear. This looks to be a problem in every framework?

System

No response

Additional context

No response

[jimmy-dee]

I saw the same issue, i am using the nextjs framework. What I found, is that if my story files where anywhere but under ./stories/ it would throw this error

For example: stories: ["../stories//*.mdx", "../stories//.stories.@(js|jsx|ts|tsx)"] works fine ['../**/.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'] <- this would throw the duplication error.

Hope that helps

[yannbf]

Hey @jimmy-dee that's great info! Could you provide us a minimal repro of the issue? We now have a website to make it easier to create repros: https://storybook.new/

Thank you!

[rich-exogee]

Hi - I'm sure this is just a minor script error somewhere. It's very easily fixed - All the React example stories have both JS and JSX story versions with identical titles. I was able to resolve the issue by renaming the titles so that they were no longer duplicated (eg. 'Examples/Button' in Button.stories.js -> 'JS/Examples/Button' and in Button.stories.jsx -> 'JSX/Examples/Button').

Good work on getting 7.0.0-rc.4 to work with pnpm.

[aspirisen]

Looks like I've got similar issue

The problem was in stories prop. I do not have src folder and thus I included all folders from root level stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],. But on that level I also have node_modules and storybook tried to add stories from it as well

[danisaurio]

Looks like I've got similar issue

The problem was in stories prop. I do not have src folder and thus I included all folders from root level stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],. But on that level I also have node_modules and storybook tried to add stories from it as well

THANK YOU!! 🎉

[Yedidya10]

Hi.

Can someone update what the status of this bug is? It would be great if it was like the previous version, which automatically ignores the node models folder...

If I try to solve the problem by specifying the folder tree in main.ts, I still get an error in the UI:

[wolsk1]

Did you try automigrate feature of storybook?

[Yedidya10]

Did you try automigrate feature of storybook?

Indeed.

[yannbf]

Hey everyone! I investigated this and the reason this happens is that given that Storybook by default includes node_modules when indexing stories, plus the fact that Storybook ships example stories in its node_modules (which are added to your project on init), it might cause indexing errors in some user projects if they specify story globs in their main.js file that might have node_modules in it.

We'll discuss and propose changes to this behavior for future versions, but for now, the solution is quite simple: do not include paths that contain node_modules. Sorry for the trouble!

[shilman]

@yannbf I bet what's going on here is that people upgrading from 6.5 are also upgrading to SSV7, and that's what's causing the change in behavior.

[hjr3]

people upgrading from 6.5 are also upgrading to SSV7, and that's what's causing the change in behavior.

If you, like me, had no idea what this means then here is the tl;dr:

Add the following to your storybook config:

  features: {
    storyStoreV7: false,
  },

Details here: https://storybook.js.org/docs/react/configure/overview#on-demand-story-loading

[kdefaoui]

This solved the issue for me: Edit config of the file **.storybook/main.js**

module.exports = {
  // ...
  webpackFinal: async (config) => {
    // ...
    config.module.rules[0].exclude = /node_modules/;
    // ...
    return config;
  },
  watchOptions: {
    // ...
    ignored: /node_modules/,
    // ...
  },
  // stories: ["../*/.stories.mdx", "../*/.stories.@(js|jsx|ts|tsx)"],
  stories: [
    // ...
    {
      directory: "../folder_1",
      files: "*/.@(mdx|stories.@(js|jsx|ts|tsx))",
    },
    {
      directory: "../folder_2",
      files: "*/.@(mdx|stories.@(js|jsx|ts|tsx))",
    },
    // folder N
    // ...
  ],
  // ...
};

[Yedidya10]

Hey everyone! I investigated this and the reason this happens is that given that Storybook by default includes node_modules when indexing stories, plus the fact that Storybook ships example stories in its node_modules (which are added to your project on init), it might cause indexing errors in some user projects if they specify story globs in their main.js file that might have node_modules in it.

We'll discuss and propose changes to this behavior for future versions, but for now, the solution is quite simple: do not include paths that contain node_modules. Sorry for the trouble!

Can you show a code syntax that can exclude this folder from scanning?

I tried to do something like this, but it doesn't seem to work;

   stories: [
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
     '!../node_modules/**',
   ],

I get the following message in the browser:

Couldn't find any stories in your Storybook.

• Please check your stories field of your main.js config.
• Also check the browser console and terminal for error messages.

and the following message in the terminal:

ModuleNotFoundError: Module not found: Error: Can't resolve './.storybook/' in 'C:\Users\XXX\Documents\Projects\XXXX'
    at C:\Users\yedid\Documents\Projects\XXXX\node_modules\webpack\lib\Compilation.js:1506:33
    at C:\Users\yedid\Documents\Projects\XXXX\node_modules\webpack\lib\ContextModuleFactory.js:183:22
    ...
  Parsed request is a directory
  using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: .)
    using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook)
      as directory
        existing directory C:\Users\yedid\Documents\Projects\XXXX\.storybook
          using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook)
            using path: C:\Users\yedid\Documents\Projects\XXXX\.storybook\index
              using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook/index)
                no extension
                  C:\Users\yedid\Documents\Projects\XXXX\.storybook\index doesn't exist
                .js
                  C:\Users\yedid\Documents\Projects\XXXX\.storybook\index.js doesn't exist

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

[akshaypx]

Hey everyone! I investigated this and the reason this happens is that given that Storybook by default includes node_modules when indexing stories, plus the fact that Storybook ships example stories in its node_modules (which are added to your project on init), it might cause indexing errors in some user projects if they specify story globs in their main.js file that might have node_modules in it. We'll discuss and propose changes to this behavior for future versions, but for now, the solution is quite simple: do not include paths that contain node_modules. Sorry for the trouble!

Can you show a code syntax that can exclude this folder from scanning?

I tried to do something like this, but it doesn't seem to work;

   stories: [
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
     '!../node_modules/**',
   ],

I get the following message in the browser:

Couldn't find any stories in your Storybook.

• Please check your stories field of your main.js config.
• Also check the browser console and terminal for error messages.

and the following message in the terminal:

ModuleNotFoundError: Module not found: Error: Can't resolve './.storybook/' in 'C:\Users\XXX\Documents\Projects\XXXX'
    at C:\Users\yedid\Documents\Projects\XXXX\node_modules\webpack\lib\Compilation.js:1506:33
    at C:\Users\yedid\Documents\Projects\XXXX\node_modules\webpack\lib\ContextModuleFactory.js:183:22
    ...
  Parsed request is a directory
  using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: .)
    using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook)
      as directory
        existing directory C:\Users\yedid\Documents\Projects\XXXX\.storybook
          using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook)
            using path: C:\Users\yedid\Documents\Projects\XXXX\.storybook\index
              using description file: C:\Users\yedid\Documents\Projects\XXXX\package.json (relative path: ./.storybook/index)
                no extension
                  C:\Users\yedid\Documents\Projects\XXXX\.storybook\index doesn't exist
                .js
                  C:\Users\yedid\Documents\Projects\XXXX\.storybook\index.js doesn't exist

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I did same, specified the folder, stories: [ '../stories/*.stories.mdx', '../stories/*.stories.@(js|jsx|ts|tsx)', ], and then restarted from terminal, worked for me.

[Yedidya10]

I did same, specified the folder, stories: [ '../stories/*.stories.mdx', '../stories/*.stories.@(js|jsx|ts|tsx)', ], and then restarted from terminal, worked for me.

I decided to reinstall, and actually you are right. As long as I set the stories path to a default folder it works

stories: [
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],

The errors start to appear as soon as I change the path (because for me they are attached to the component folder and not grouped in the stories folder.

[takeshikriang]

I have managed to fix the problem on Next.js with this:

stories: [
  '../components/**/*.stories.@(js|jsx|ts|tsx)'
]

[Flcwl]

how to except the node_modules ?

[Flcwl]

people upgrading from 6.5 are also upgrading to SSV7, and that's what's causing the change in behavior.

If you, like me, had no idea what this means then here is the tl;dr:

Add the following to your storybook config:

  features: {
    storyStoreV7: false,
  },

Details here: https://storybook.js.org/docs/react/configure/overview#on-demand-story-loading

This is Ok. hh

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.29 containing PR #22873 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.20 containing PR #22873 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[Flcwl]

??? So bad. how fix it? why I must close storybook V7 mode

[jonasmarco]

Same erro here : /

"storybook": "^7.1.0"

[morganney]

I'm not sure why this was closed. I'm using v7.3.2 and am not upgrading from v6 but the problem still persists. A simple project setup like the following

project/
  .storybook/
    main.ts
  src/
    file.tsx

main.ts

const config: StorybookConfig = {
  stories: ['../src/**/*.tsx'],
  framework: '@storybook/react-vite',
  core: {
    builder: '@storybook/builder-vite',
  },
}

And then running storybook dev produces the following error:

WARN 🚨 Unable to index ./src/file.tsx:
WARN   Error: Invariant failed: No matching indexer found for /path/to/project/src/file.tsx

If I change the filename to src/file.stories.tsx ~and update the glob pattern to ../src/**/*.stories.*~ (don't even need to update the glob pattern) the error will go away. I could have also used the extended extension file.story.tsx instead of file.stories.tsx. If I add features: { storybookStoreV7: false } I can use whatever naming convention I want and the error also goes away.

Seems anytime you use storybookStoreV7 there is an expected naming convention to be used for the stories.

[yannbf]

Hey there @morganney, thanks for sharing your use case. This issue was happening because Storybook included node_modules by default in its indexing, and it could end up clashing if your stories matched the same id of example stories from node_modules. This is not the case anymore, which is why this issue is closed.

It seems like in your use case you want to create story files that do not follow a convention (which existed since the beginning of Storybook, and it's the only way we display and recommend in our documentation), and want Storybook to be able to identify those files as Storybook specific. You have the first use case I've ever seen where a user wants to define story files as *.tsx instead of *.(stories|story).tsx.

To give you some context, in previous versions of Storybook, before storyStoreV7, the way you created stories was imperative, where you have to call Storybook's apis. In that case, even if you told Storybook that any *.tsx is a story, it would only do something if those files contained those Storybook apis (though it would be quite bad for performance because Storybook would have to evaluate non-related files as well).

In Storybook 7, the way you create stories is declarative, with a meta (default export) and stories (named exports). These are statically analyzed by Storybook's default indexers, and Storybook will only know that they are stories because they follow a convention. Had Storybook not had such convention, it would treat any file that has both named + default exports (which is common in React components, for instance) as a story file, and that would easily cause side effects and problems.

I am not sure why one would not want to follow the convention, which:

• helps team members understand the purpose of the file without having to look into its contents;
• aligns with any material online, be it blog posts, our documentation, youtube videos etc;
• works with our eslint-plugin, which can be quite helpful in Storybook projects;
• works with tool integrations that help visualize such files as stories (e.g. display Storybook icons)

But if you really want to do this (though I do not recommend), you can look into our docs to create a custom story indexer, to treat the files the way you'd want:

https://storybook.js.org/docs/react/configure/sidebar-and-urls#story-indexers

Hopefully this helps!

[morganney]

You have the first use case I've ever seen where a user wants to define story files as *.tsx instead of *.(stories|story).tsx.

I’ve used storybook for years and never once named my story files with .stories|story, the glob just worked. This is the first version I’ve used that seems to want to enforce the naming convention.

I am not sure why one would not want to follow the convention

Because I should be able to use my own conventions. Why support a glob at all then?

Anyway, as usual with every storybook install I’ve undergone, I’ve found a workaround for unexpected gotchas from anything but a straightforward install.

[lilongsswang]

If just for example folder, maybe delete the duplicate file with the same name of *.ts. Eg, delete the Header.stories.js, as there also have a file named Header.stories.ts.