Story module not-showing/replaced by similar module

[amypellegrini]

Describe the bug
Having two modules with a matching starting name, and one of them with a # symbol, makes one of the modules disappear.

To Reproduce
Steps to reproduce the behavior:

1. Using the provided code snippet, launch Storybook app and navigate to the module "Part"
2. The listed modules only display "G clef, C# major, Common time"

Expected behavior
It should show both listed modules.

Screenshots

Code snippets

import React from 'react';
import { storiesOf } from '@storybook/react';
// import Part from './part';

storiesOf('Part', module)
  .add('G clef, C major, Common time', () => {
    return (
      <div style={{ margin: '3rem 0' }}>
        {/* <Part
          clef="G-clef"
          keySignature="C"
          keyQuality="major"
          commonTime
          staveType="stave"
        /> */}
      </div>
    );
  })
  .add('G clef, C# major, Common time', () => {
    return (
      <div style={{ margin: '3rem 0' }}>
        {/* <Part
          clef="G-clef"
          keySignature="C#"
          keyQuality="major"
          commonTime
          staveType="stave"
        /> */}
      </div>
    );
  });

System:
Version: @storybook/react: ^5.0.6

Additional context
Removing the # symbol, or changing the name of the missing module up to # character position, makes the module reappear.

[shilman]

@amypellegrini are there any errors in the browser console?

[amypellegrini]

@shilman Looked at the console I can see this:

Story with id part--g-clef-c-major-common-time already exists in the store!

Perhaps you added the same story twice, or you have a name collision?
Story ids need to be unique -- ensure you aren't using the same names modolo url-sanitization.

Maybe the way SB encodes the id for the story removes the # at some point thus producing the collision?

[shilman]

@amypellegrini is there another story with the id part--g-clef-c-major-common-time? I believe that the ID generation code does remove some special characters, so it's possible that two stories with different names get collapsed to the same ID. The workaround there would be to change the name of your story so that there's no collision. If that's indeed the problem, we probably need to improve this on the storybook side. I don't think there's too much we can do without adding a breaking change, but at least we could maybe provide a much more useful error message so that it's clear what's going on and what to do.

[amypellegrini]

@shilman To debug this I removed all the stories leaving only two, one with the hash and the other without, like in the provided code snippet. If understand correctly the id is generated from the text string used to describe the module, so in this case the collision is generated by SB parsing the text string and removing the hash special character.

To workaround the issue for now I just removed the special characters and used plain words ("sharp", "flat") so it's not like this is a major issue, maybe a note could be added in the documentation to warn users about this?

An ideal scenario would be that this doesn't happen and I can use special characters, or alternatively I can provide a custom valid id so I can still use special characters without producing the issue.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jonniebigodes]

Closing this as it's now documented. Thanks for raising the issue and the long waiting period before being addressed.

Hope you have a great week!

Stay safe