[Bug]: Webpack Hot Module Replacement doesn't work

[hudochenkov]

Describe the bug

Storybook always shows loading bar instead of content when using Webpack and changes is triggered after full page load.

Even at initial start of storybook dev content is never shown until manual page refresh.

No errors in browser console or terminal.

To Reproduce

Open Stackblitz created from “React v18 Webpack (TypeScript)” template. No changes were made to code.

After storybook dev finished compiling we still see a loading bar.

Manually refresh preview — we see content. Make any change to any story — content replaced with loading bar until page is manually refreshed.

System

Stackblitz system:

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/addon-interactions: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/addon-links: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/blocks: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/react: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/react-webpack5: ^7.1.0-alpha.34 => 7.1.0-alpha.35 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

My laptop:

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 16.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Firefox: 114.0.1
    Safari: 16.4
  npmPackages:
    @storybook/addon-a11y: ^7.1.0-alpha.32 => 7.1.0-alpha.33 
    @storybook/addon-essentials: ^7.1.0-alpha.32 => 7.1.0-alpha.33 
    @storybook/addons: ^7.1.0-alpha.32 => 7.1.0-alpha.33 
    @storybook/react: ^7.1.0-alpha.32 => 7.1.0-alpha.33 
    @storybook/react-vite: ^7.1.0-alpha.32 => 7.1.0-alpha.32 
    @storybook/react-webpack5: ^7.0.21 => 7.0.21 
    @storybook/theming: ^7.1.0-alpha.32 => 7.1.0-alpha.33

Additional context

Issue is also reproducible on a project, which doesn't have any webpack config, but use react-webpack5 builder in storybook.

[shilman]

@ndelangen This looks like a serious bug on both main and next and in any webpack project (I also repro'd in CRA). It looks like a UI bug more than anything. If you resize the window so that the manager UI toggles between the mobile & desktop layouts it will also cause the preview to refresh and show the updated values for args, so you don't need to do a full browser refresh to get the updates.

NOTE: this does not reproduce in a vite project, so it is not purely a UI thing 🤷

[yannbf]

@shilman OP's issue seems to come from #22940, which was never patched so it wouldn't be in main. Regardless, we couldn't reproduce the issue on main, and if there is an issue it's probably something slightly different. If you do have a way to repro, please share it!

[hudochenkov]

Thank you for a quick fix! I could check when a new alpha is released.

[toridyar]

@shilman @yannbf
I am still seeing this issue in storybook 7.1.0 and up to 7.2.3
we are also on webpack 5