[Bug] HMR for manager code doesn't work, so addon-kit's watch mode doesn't do as much as expected

[morewings]

Describe the bug

Watch mode (aka live reload) is broken for me. My setup: macOS 12.6.3, Node v16.14.0. When I change the code, Storybook in browser doesn't show the change.

Maintainers' notes: the issue is not with build:watch in the addon-kit but with the lack of HMR for manager code in Storybook itself.

Steps to reproduce the behavior

1. Clone this repo on macOS 12.6.3, Node v16.14.0.
2. Run yarn install
3. Run yarn start
4. Change any displayable value in src/Tool.tsx
5. Save file
6. Elevator music playing
7. Nothing is changed in browser.

Expected behavior

Changes in the code are reflected in running Storybook instance without reloading Storybook manually.

Environment

• OS: macOS 12.6.3
• Node.js version: v16.14.0
• NPM version: 9.2.0
• Browser (if applicable): chrome, safari, firefox
• Browser version (if applicable): n/a
• Device (if applicable): MacBook Pro 2015

Additional context

No other context. Thanks for your work, colleagues.

[SpookyJelly]

Same happens here. with machOS 12.6, Node v16.x.

I have to re-build everytime the project to see changes and it is really pain in my ass

P.S) I am using this addon kit without ts-emit. is that a reason this happens?

[morewings]

@SpookyJelly can you elaborate tsemit part? Haven’t seen the docs for that.

[SpookyJelly]

@morewings Sure, I followed the tutorial below. In here, author used the eject command to convert the boilerplate code to JavaScript.

https://storybook.js.org/tutorials/create-an-addon/react/en/getting-started/

[winkerVSbecks]

This is a regression for sure. We dropped the hmr code from index.ts:

if (module && module.hot && module.hot.decline) {
  module.hot.decline();
}

The reason we dropped hmr was to avoid shipping addons with hmr. I'll look into adding it back in for dev mode.

[winkerVSbecks]

Investigated this a bit more, and turns out that this is a limitation with Storybook 7.

In SB7, the manager is pre-bundled. The watch mode works and the generated code is updated, but Storybook doesn't rebuild the manager. In SB6, we could disable the cache to refresh the manager on each build.

Prebundling was a major perf boost for Storybook users, but unfortunately, it made addon development a bit more challenging. I'm looking at other options. Will let you all know if I figure something out.

[SpookyJelly]

Investigated this a bit more, and turns out that this is a limitation with Storybook 7.

In SB7, the manager is pre-bundled. The watch mode works and the generated code is updated, but Storybook doesn't rebuild the manager. In SB6, we could disable the cache to refresh the manager on each build.

Prebundling was a major perf boost for Storybook users, but unfortunately, it made addon development a bit more challenging. I'm looking at other options. Will let you all know if I figure something out.

I hope the research goes well. SB7 is really awesome and I don't want to go back SB6 :(

[winkerVSbecks]

This should only impact you during addon development. Not when using the addon.

[morewings]

@winkerVSbecks I think @SpookyJelly is talking about developer experience. I can make addon without live reload, like in good old times. But it’s wrong. The mission of Storybook is to make devs and designers life easier, not harder.

[ericclemmons]

Do we have any ideas how to work around this with SB 7? I've tried several things on my end, but they've all failed. Local addons are still parsed (I'm using .tsx), but the HMR isn't there...

[AriPerkkio]

Adding custom tsup hook that restarts the storybook dev server improves developer experience a bit. You'll still have to manually refresh the browser, but at least changes are reloaded automatically:

import { defineConfig } from 'tsup';
import { exec } from 'node:child_process';

export default defineConfig((options) => ({
  async onSuccess() {
    if (!options.watch) return;

    const subprocess = exec('pnpm run storybook --no-open');
    subprocess.stdout?.on('data', (data) =>
      console.log(`[storybook]: ${data}`)
    );

    return function cleanup() {
      subprocess.kill();
    };
  },
...

[JoltCode]

This still seems to be an issue ^, it's a real pain!