Storybook: [Storybook 6.0.0-beta.16] HMR not working properly

[yannbf]

Describe the bug

There seems to be an issue with Hot module reloading and the latest changes in Storybook.
Webpack seems to pickup the changes and rebuild accordingly, but it's behaving really weirdly in a lot of different scenarios (click on each gif to open in better resolution):

1 - Changing arbitrary code
It's necessary to refresh in order to see the changes.

2 - Renaming the default title of a story
It's duplicating the stories in the manager.

3 - Adding/removing stories
It's not reacting accordingly

At the end of the video above I commented all stories, and as a result I got this (render of the button + message saying there was no preview)

To Reproduce
Use the gifs on top as a reference.

Expected behavior
HMR should be working correctly, with changes being picked up and reacting accordingly.

Screenshots

The issue happened to me using a starter from Vue + TS and the starter from sb init. I will check if it's happening with other frameworks, although I believe it is.

System:
Environment Info:

System: OS: macOS 10.15.4 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Binaries: Node: 12.16.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 83.0.4103.61 Firefox: 74.0 Safari: 13.1 npmPackages: @storybook/addon-actions: ^6.0.0-beta.16 => 6.0.0-beta.16 @storybook/addon-links: ^6.0.0-beta.16 => 6.0.0-beta.16 @storybook/addons: ^6.0.0-beta.16 => 6.0.0-beta.16 @storybook/vue: ^6.0.0-beta.16 => 6.0.0-beta.

[yannbf]

cc @ndelangen @tmeasday

[yannbf]

Can confirm it's behaving similarly in a React project + Beta 16

[chrisj-skinner]

I can confirm that point 2 - Renaming the default title of a story happens in my angular storybook 6.0.0-beta.16 BUT only within ...stories.mdx files.

...stories.ts are not effected.

[tmeasday]

Thanks @yannbf

[ndelangen]

@tmeasday if you want to work on this together, ping me?

[tmeasday]

@ndelangen I'm poking around in this area already. I'll diagnose and bring you in if the fix isn't easy.

[tmeasday]

I tried some reproductions here on next and there are some slight differences:

1. Changing a story: This is working fine on next. Could it be a bug we recently fixed?

2. Renaming a kind: This doesn't reproduce (the duplication), it simply has no effect, more similar to 3.

3. Adding/removing stories: This reproduces as described.

In cases 2&3 I noticed that the SET_STORIES event is firing and sending over the correct data. So it is a manager issue, likely due to the refs changes @ndelangen -- I might hand this over to you after all.

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.18 containing PR #10981 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.

[eranshmil]

Jeepers creepers!! I just released v6.0.0-beta.18 (release) containing PR #10981 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.

Using version 6.0.0-beta.19 with an Angular project, I'm having the following issue:

Before this fix, there was a different issue:

[ndelangen]

Could you have a reproduction perhaps?

I suspect what's happening is you're writing stories for the same component in multiple story-files.

This messes up the storyStore. If you keep all stories of a component in a single story-file, does the problem still occur?

[eranshmil]

Could you have a reproduction perhaps?

I suspect what's happening is you're writing stories for the same component in multiple story-files.

This messes up the storyStore. If you keep all stories of a component in a single story-file, does the problem still occur?

I'm using the same title in multiple files, in order to group them under the same parent. I thought it's should be supported.
Let me know if you still need a repro of that.

[ndelangen]

@eranshmil we assume every storyFile to have a unique component / title.

When HMR happens we remove all stories of a particular title and then run add the stories again from the file that was HMR'd.

This is why you see the story from the other file being removed.

[eranshmil]

@eranshmil we assume every storyFile to have a unique component / title.

When HMR happens we remove all stories of a particular title and then run add the stories again from the file that was HMR'd.

This is why you see the story from the other file being removed.

So it is not possible to group stories under the same parent from different story files?

[ndelangen]

If you want to fragment stories of the same group into different files, you could try importing them?

[shilman]

Will fix (by explicitly disabling) in #11108