Storybook mocks don't hot module update

[KrisCoulson]

I was developing a new feature "The Redwood Way" aka: Design driven development. Basically to see how this actually holds up when developing a feature. It's actually pretty good although we should probably highlight mocking a bit more. But I noticed that mock updates get caught and don't do a hot module reload. It fixes if you hard refresh the page. But does break the flow and there is no warning saying to reload the page. Only if you look in the console can you see the error.

https://user-images.githubusercontent.com/6943688/157787777-44c871cf-2ca0-4b5e-9375-b74384f153cb.mov

[thedavidprice]

Looping in @dac09 @virtuoushub @dthyresson

I ran into this specifically going from:

1. Cell with Mocks
2. Then viewing the Page containing the cell
3. required kill/restart of the SB server

This issue is the one remaining "hiccup" in my Design-driven Full-stack presentation. I'll be able to get around it by using recorded snippets instead of a live walkthrough. BUT I'm creating a repo to share for people to go through the steps themselves.

There will be 1,500 people at the conference 😰 along with live streaming and then posted recording. So I'm super nervous but have zero bandwidth to look into this.

Any chance one of you could help prioritize and chip away at this? No pressure as it's not a dealbreaker.

[ajcwebdev]

@chantastic, any chance someone on the Storybook team might be able to help us diagnose and either remedy the issue or find a good work around?

[chantastic]

@ajcwebdev thanks for the ping!

I'm sure that @yannbf could speak knowledgable to this.

Working out the MSW initialization timing is something that has been super tricky in Storybook. We're still trying to figure out the best way to do this that handles the majority use case.

I wonder if surfacing a request to refresh might be a good DX start 🤔

[virtuoushub]

Have not had too much time to dig into this, but I did briefly sync with some of the @storybookjs folks. Summarizing below:

---

TODO

• [ ] look into if our main.js storybook abstraction is causing issues with the default Storybook HMR behavior

  • Your change to the story file (CustomDomainCell.mock.ts) is somehow triggering a change in the preview.js. Is that something unusual in how you are loading stories? Or something else?

  • So the generated preview file is coming from node modules, given that with redwoodjs the “main” preview file is coming from your abstraction. Maybe this is one of the reasons the hot update is not accepted?

• [ ] look into if story store v7 fixes the issue we are seeing

  • The change to preview.js triggers a full reload of the SB. This is a known limitation of SSv6 and is resolved in SSv7. (features.storyStoreV7: true)

[jtoar]

Next step here is research. How does storybook's HMR work? Can we extend or override the storybook HMR (hot module reload) behavior? If a mock file is changed, we can "over" reload, rebuilding storybook entirely if necessary?

(Note: we talked about this issue live in the August contributor's workshop. Link TBD)

[IThinkThatsKirby]

I'm looking at this.

[yannbf]

Hey peeps, if you need some assistance I might be able to help, so feel free to schedule a call if you need