Stories disappear after HMR

Describe the bug While Storybook is running, after making a change to source and saving, webpack rebuilds and HMR updates the browser. But when this happens, many of the stories disappear.

To Reproduce Steps to reproduce the behavior:

1. Launch storybook
2. After it has built and launched in the browser, make a code change and save
3. wait for HMR to finish

Expected behavior All the stories to remain, and the new code changes to be present.

Actual behavior: most stories disappear

Screenshots Starting state:

After performing the above steps:

System:

• OS: Ubuntu 18.04
• Device: Lenovo ThinkPad
• Browser: Chrome 75.0.3770.100
• Framework: React 16.8
• Addons: addon-docs
• Version: 5.2.0.-beta.3

Additional context I have been using the 5.2.0 alphas (and now betas) to try out the docs features. My stories are written in MDX. I did not notice this happening when I was using the alphas, but it does occur for me with both 5.2.0-beta.0 and 5.2.0-beta.3

The only error I see in the browser console is vendors~main.44efb48ad30cf85163a3.bundle.js:585 The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". which doesn’t seem relevant.

In the terminal, I see no errors. I do get warnings like this

WARNING in ./packages/react-primitives/src/components/button/index.ts 1:0-68
"export 'PrimaryButtonProps' was not found in './primaryButton'
 @ ./packages/react-primitives/src/components/button/__stories__/primaryButton.stories.mdx
 @ ./packages sync .stories.mdx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

These warnings are all for TypeScript interfaces. On the surface they seem unrelated (I’ve always gotten these warnings)

If I refresh the browser, the stories all return to normal.

[shilman]

@city41 The storiesOf API does not support MDX (per se, you could hack it but I’d strongly recommend against this).

The right way to do this unless you really want to fight against Storybook is that each component gets its own MDX file.

We have UI updates planned that will partially address your nesting concerns, which are partially described in https://github.com/storybookjs/storybook/issues/6646 and https://github.com/storybookjs/storybook/issues/6644

Specifically, when you’re running in dev mode, the extra nesting will be there, but we’ll save you one click since clicking on the component will navigate to the first story.

When you static export your stories using the build-storybook --docs flag we won’t show the stories within a component, so you should see what you want on a documentation site.

Both of these changes are still tentative, but will be fixed before 5.2 ships. In the future we may also allow addons to mess with the nav hierarchy, so that’s a backdoor to do even more customization.

Hope that helps.

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.8 containing PR #7542 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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