Storybook: Stories doesn't include name when embedding CSF

[ajkl2533]

Describe the bug
Connected to #11752, Story component doesn't include 'name' prop automatically when using <Story story={stories.basic} /> syntax, which causes storybook to fail with Invalid name '', must include alphanumeric characters error. When 'name' prop is added manually everything is working.

cc @shilman

[koop]

Can confirm that this is happening for us as well as of rc.25 👍

[kylegach]

@shilman — While this has a workaround, it's one that must be applied to every <Story> in our MDX files, which is painful.

Can you point to where and/or what change needs made? This seems like a pretty big bug given that this is the documented preferred way to reference stories in MDX.

[shilman]

@kylegach Yes, this is an important bug but I haven't had a chance to get to the bottom of it yet.

You can see the relevant changeset here: https://github.com/storybookjs/storybook/pull/11752/files

Some notes:

The mdxStoryNameToKey mapping is important for how this gets rendered. Therefore, we need to generate a name for each story if one is not provided.

This is supposedly done in the genImportStory function introduced in that PR. You can also see that at some level it's working in csf-imports.mdx / csf-imports.output.snapshot.

However, at some level this is clearly failing. Debugging/PRs welcome.

[shilman]

On further inspection, this works:

<Story story={MyStories.Basic} />

This doesn't:

<Canvas>
  <Story story={Other} />
</Canvas>

Fix coming soon.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.9 containing PR #12044 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.