index.stories.svelte not recognized as a legit story

[michaelwooley]

Describe the bug

I have historically set up my stories so that each component has a directory containing the component with the story right beside it. For example:

src/components
├── index.ts
└── Navbar
    ├── index.stories.svelte
    ├── index.svelte
    └── svelte-logo.svg

I found that index.stories.svelte is never picked up by Storybook. However, if I rename this file to, e.g., Navbar.stories.svelte then everything works fine.

This is not a problem per se - I can rename things - but it was rather annoying to try to figure out.

Additional steps outside of the reproduction: In addition to the usual setup, I followed the guide described in #14929.

To Reproduce

I don't see too much in to reproduction repo that might help to describe this issue but here it is anyway:

https://github.com/michaelwooley/storybook-svelte-index-issue-repro

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 16.3.0 - /usr/bin/node
    Yarn: 2.4.2 - /usr/bin/yarn
    npm: 7.16.0 - /usr/bin/npm
  Browsers:
    Firefox: 89.0.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-docs: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-essentials: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-links: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.3.0-rc.11 => 6.3.0-rc.11 

Additional context
Add any other context about the problem here.

[shilman]

That's pretty strange. Any ideas @j3rem1e ?

[j3rem1e]

This is related to the generation of the component name. there is two "index" in the folder "Navbar", and the two components are assumed to have the same name "Navbar" (the real component and the stories component).

I'll check how to fix that.

A little workaround : in 'index.stories.svelte', don't do import Navbar from "./index.svelte" but use another name : import NavbarCpn from "./index.svelte"