Storybook: Hot Module Reload in web components storybook v6.0.20

[miyass]

I configured @storybook/web-components HMR referring to Setup page reload via HMR
After upgrading v6.0.20, this warning message was appeared.

configure() is deprecated and will be removed in Storybook 7.0.
Please use the stories field of main.js to load stories.

That's why I wanna remove congiure() from preview.js!
If I removed configure(), maybe it works normally.

const req = require.context('../src', true, /\.stories\.(js|mdx)$/);
if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

Is it the correct way ?
Or are there any alternative way ?
Thank you !

[two-legs]

It doesn't work for me without configure call

[shilman]

@LarsDenBakker @daKmoR do you guys have any HMR solution with storybook main.js config?

[daKmoR]

@shilman I'm afraid not right now... we still do full page reloads - however, there have been multiple ideas for HMR and web components but none has been fully implemented yet 😅

there has been some renewed energy it seems though 👍

some references
https://github.com/modernweb-dev/web/pull/685
https://github.com/open-wc/open-wc/issues/787
https://github.com/Polymer/lit-element/pull/802

[shilman]

@daKmoR Is there an "automatic full page reload" solution for main.js story declarations?

[daKmoR]

isn't something like this still in there? should be good enough until web component can do "proper" HMR

if (module.hot) {
  module.hot.accept(req.id, () => {
    window.location.reload();
  });
}

[shilman]

Aha just put it at the top level. Thanks @daKmoR! 💯

[victorgirotto]

Is the snippet suggested by @daKmoR still supposed to be in preview.js? Currently I have this in my preview.js:

const req = require.context('../stories', true, /\.stories\.mdx$/);
if (module.hot) {
  module.hot.accept(req.id, () => {
    window.location.reload();
  });
}

This setup is not refreshing the page and therefore I'm still running into the "has already been used with this registry" error. It only works when I call the deprecated configure() method.

[shilman]

Hmm I don't think there's any way to access the req from preview.js currently. @daKmoR @ndelangen ?

[shilman]

As a temporary workaround, you should be able to continue using configure and ignore the warning for now. We need to sort this out in 6.x. @daKmoR can you help figure out the upgrade here?

[blikblum]

As a temporary workaround, you should be able to continue using configure and ignore the warning for now. We need to sort this out in 6.x. @daKmoR can you help figure out the upgrade here?

@shilman @daKmoR

Just like to point a side effect of calling configure in preview.js:

When exporting stories config in main.js (as recommended), configure will be called twice. At first look, this seems harmless but actions will be triggered twice due to event listener being registered twice.

Initially i tried to remove the configure call and keep main.js stories config: the double action trigger was fixed but no reloading.

I managed to fix by reverting the configure call in preview.js and removing stories config in main.js.

[shilman]

@blikblum That's correct. Calling configure in preview.js is mutually exclusive with stories in main.js. Sorry if that wasn't clear.

[blikblum]

By following web-components documantation you end up in a situation with both settings: 'npx -p @storybook/cli sb init -t web_components' creates main.js with stories config and in hot reload workaround instructions does not mention the need to remove main.js config.

If the workaround will stay for some time, a note in the documentation may be worth

[shilman]

Thanks for the heads up! Cc @jonniebigodes