Storybook: Hot-reload is not working

[matheuspiment]

Describe the bug
The hot-reload stopped working as of version 6.1.0-alpha.33 - 6.1.0-beta.1.

Due the changes on the dev-server, specifically on line 136:
https://github.com/storybookjs/storybook/blob/a5ee924e01e4e5c9d0170e2a70f8fc8a5825cfbb/lib/core/src/server/dev-server.js#L136

It seems that we cannot end the response, otherwise the error occurs:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using cached manager
info => Using default Webpack setup
webpack built 36131c168b7135804f0d in 32571ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.1.0-beta.1 started                   │
│   34 s for preview                                 │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.100.3:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
webpack building...
10% building 0/0 modules 0 activeevents.js:174
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at write_ (_http_outgoing.js:572:17)
    at ServerResponse.write (_http_outgoing.js:567:10)
    at reportProgress (/home/matheus/<...>/packages/ui-kit/node_modules/@storybook/core/dist/server/dev-server.js:208:16)
    at handler (/home/matheus/<...>/packages/ui-kit/node_modules/@storybook/core/dist/server/dev-server.js:243:5)
    at compiler.hooks.compilation.tap.compilation (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/ProgressPlugin.js:176:5)
    at SyncHook.eval [as call] (eval at create (/home/matheus/<...>/packages/ui-kit/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:87:1)
    at Compiler.newCompilation (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/Compiler.js:631:26)
    at hooks.beforeCompile.callAsync.err (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/Compiler.js:667:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/matheus/<...>/packages/ui-kit/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Compiler.compile (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/Compiler.js:662:28)
    at compiler.hooks.watchRun.callAsync.err (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/Watching.js:77:18)
    at _next0 (eval at create (/home/matheus/<...>/packages/ui-kit/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at _err0 (eval at create (/home/matheus/<...>/packages/ui-kit/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
    at watchRunHook (/home/matheus/<...>/packages/ui-kit/node_modules/webpack-virtual-modules/index.js:173:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/matheus/<...>/packages/ui-kit/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at Watching._go (/home/matheus/<...>/packages/ui-kit/node_modules/webpack/lib/Watching.js:41:32)
Emitted 'error' event at:
    at writeAfterEndNT (_http_outgoing.js:634:7)
    at process._tickCallback (internal/process/next_tick.js:63:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce
Steps to reproduce the behavior:

1. Install one of the versions specified above
2. Start the storybook dev server, usually start-storybook -p 6006
3. Make any changes to any component and save the file
4. See error

Expected behavior
The hot-reload should work as before (versions prior to 6.1.0-alpha.33).

Screenshots
See the "Describe the bug" section.

Code snippets
See the "Describe the bug" section.

System
Please paste the results of npx sb@next info here.

✦ ❯ npx sb@next info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Browsers:
    Chrome: 86.0.4240.75
    Firefox: 82.0

Additional context
None.

[JonathanSpeek]

Seeing hot reloading issues in CSF stories using version 6.0.21. If I make a change in a component, seeing below until I refresh.

[shilman]

@JonathanSpeek pretty sure what you're seeing is unrelated to the original issue. are there any browser console errors?

[benoitgrelard]

I'm seeing the same issue as @matheuspiment.
I have had to update to 6.1.0-beta.3 because of the react 17 compatibility issues (https://github.com/storybookjs/storybook/issues/12408) but now it's another level of frustration having storybook crash everytime I save my file…

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.4 containing PR #13007 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[benoitgrelard]

Thanks for that!