[Bug]: Connection lost Lost connection to the Storybook server. Try refreshing the page.

yud0uhu commented 5 months ago

Describe the bug

TL;DR: Following the instructions in the Migration guide, I have updated from version 7.4.5 to 8.1.7 using the below CLI command. As a result, during the build process, I received a pop-up message saying "Connection lost. Lost connection to the Storybook server. Try refreshing the page." Once the building process finishes or if I refresh the page even once, the pop-up disappears and does not show up again. Is this a bug?

$ yarn dlx storybook@latest upgrade

https://storybook.js.org/docs/migration-guide

Screen Shot

Reproduction link

https://stackblitz.com/~/github.com/yud0uhu/github-9d8gmf-x8px7p

Reproduction steps

yarn storybook': launch the dev environment from port 6006.

"storybook": "run-p 'watch:*'",
"watch:tailwind": "npx tailwindcss -i src/tailwind.css -o dist/tailwind.css --watch",
"watch:storybook": "storybook dev -p 6006"

Open the localhost:6006 port in the Arc browser while building.

$ storybook dev -p 6006
$ npx tailwindcss -i src/tailwind.css -o dist/tailwind.css --watch

Rebuilding...
@storybook/cli v8.1.9

Done in 280ms.
WARN The following packages are incompatible with Storybook 8.1.9 as they depend on different major versions of Storybook packages:
WARN - @storybook/addon-postcss@2.0.0
WARN 
WARN 
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN https://github.com/storybookjs/storybook/issues/26031
info => Serving static files from ././public at /
info => Serving static files from ././style at /
info => Serving static files from ././dist at /
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.mdx
info => Starting preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/2 entries 2/2 dependencies 0/2 modulesinfo Using tsconfig paths for react-docgen
45% building 1/2 entries 1553/1600 dependencies 363/568 modules

An error message is displayed in the pop-up. "Connection lost. Lost connection to the Storybook server. Try refreshing the page."

System

Storybook Environment Info:

  System:
    OS: macOS 13.5
    CPU: (8) arm64 Apple M2
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 20.14.0 - ~/.volta/tools/image/node/20.14.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/4.0.1/bin/yarn <----- active
    npm: 10.8.1 - ~/.volta/tools/image/npm/10.8.1/bin/npm
    pnpm: 8.15.1 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.61
    Safari: 16.6
  npmPackages:
    @storybook/addon-a11y: ^8.1.7 => 8.1.9 
    @storybook/addon-actions: ^8.1.7 => 8.1.9 
    @storybook/addon-essentials: ^8.1.7 => 8.1.9 
    @storybook/addon-links: ^8.1.7 => 8.1.9 
    @storybook/addon-mdx-gfm: ^8.1.7 => 8.1.9 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/react: ^8.1.7 => 8.1.9 
    @storybook/react-webpack5: ^8.1.7 => 8.1.9 
    eslint-plugin-storybook: ^0.6.14 => 0.6.15 
    storybook: ^8.1.7 => 8.1.9

Additional context

I have confirmed that the same pop-up appears during the build process, even when I start the server after killing all local server processes. I also confirmed that the same pop-up appears immediately after killing the local server while the page of port 6006 is open.

juandinella commented 4 months ago

Same happens to me

fqf commented 4 months ago

the same problem :(

leedalei commented 4 months ago

Same happens to me :(

pfe-nazaries commented 4 months ago

Same problem here

YakovcevMark commented 4 months ago

same :(

olegmanby commented 4 months ago

same 😤

Viadsten commented 4 months ago

same :(

shilman commented 4 months ago

@ghengeveld WYDT about:

move this out of VTA and into the core
when we sense a problem, try triggering a page refresh once to solve it (e.g. when i close my laptop & reopen it)
display an error if that doesn't solve it

We are refactoring VTA as part of the Vitest integration, so I think we can lump this into that work.

ghengeveld commented 4 months ago

@shilman Refreshing the page will most likely result in a 404 if the Storybook server is gone, so I don't think refreshing automatically is a good idea. We could add a refresh button in the notification, for convenience.

Perhaps we can use a fetch request to try the waters before triggering an automatic refresh 🤔

Moving the check to Storybook core is great, I'm all for it 👍

shilman commented 4 months ago

@ghengeveld good call on the fetch request. Anecdotally, I suspect a decent percentage of these warnings are automatically correctable.

MichaelJHaywood commented 2 months ago

@yud0uhu Do you also get this error when updating stories? We've recently upgraded to v8 and now get this error on save and have to refresh the page. It also takes around 10 seconds for the hmr update to complete.

luc-marongiu commented 1 month ago

Same problem with 8.3.2.

shilman commented 1 month ago

@MichaelJHaywood what framework are you using? HMR shouldn't take 10s. If React-Vite try upgrading to the latest to reduce HMR time

luc-marongiu commented 1 month ago

I updated the following dependencies to version 8.3.4 (from 8.3.2), and HMR is now functioning correctly:

    "@storybook/addon-a11y": "^8.3.4",
    "@storybook/addon-essentials": "^8.3.4",
    "@storybook/addon-interactions": "^8.3.4",
    "@storybook/addon-links": "^8.3.4",
    "@storybook/blocks": "^8.3.4",
    "@storybook/react": "^8.3.4",
    "@storybook/react-vite": "^8.3.4",
    "@storybook/test": "^8.3.4",
    "storybook": "^8.3.4",

storybookjs / storybook