Vite Websocket Connection Failed

[rangerscience]

Summary

I have a Rails project using Vite, with hot-module reloading working just fine inside Rails... but Storybook fails completely.

Storybook continually retries, and fails, to open the websocket connection to the vite host. The actual error is this (from the browser console log):

[vite] server connection lost. Polling for restart...
WebSocket connection to 'ws://localhost:3036/vite-dev/?token=dx5uCZrEu-ka' failed:
setupWebSocket	@	VM986 client:536
	(anonymous)	@	VM986 client:531

The network request is showing as finished. When I load the up the Rails app, I can see the websocket connection being opened just fine - the only difference being the token. There's no additional error message - it's not clear why the WebSocket connection from Storybook is failing.

I'm super down to keep digging, but I'm kind of at a loss as to where to go from here. I'll see if I can reproduce the issues with the storybook.new tool...

Additional information

.storybook/main.js:

/** @type { import('@storybook/react-vite').StorybookConfig } */

const config = {
  "stories": [
    "../spec/stories/**/*.mdx",
    "../spec/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@chromatic-com/storybook",
    "@storybook/experimental-addon-test"
  ],
  "framework": {
    "name": "@storybook/react-vite",
    "options": {}
  }
};
export default config;

./vite.config.mts

import { defineConfig } from 'vite'
import ViteRails from 'vite-plugin-rails'
import ViteReactSWC from '@vitejs/plugin-react-swc'
import dynamicImport from 'vite-plugin-dynamic-import'
import ignore from "rollup-plugin-ignore"

export default defineConfig({
  base: '/',
  plugins: [
    ViteRails({
      envVars: { RAILS_ENV: 'development' },
      fullReload: { additionalPaths: ['config/routes.rb', 'app/views/**/*'] }
    }),
    ViteReactSWC(),
    dynamicImport(),
  ],
  build: {
    minify: false,
    terserOptions: {
      compress: false,
      mangle: false,
    },
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name]`,
        chunkFileNames: `assets/[name]`,
        assetFileNames: `assets/[name].[ext]`
      },
      plugins: [
        ignore(["app/javascript/entrypoints/inject_refresh_preamble.js", "/@react-refresh"])
      ],
    }
  },
  server: {
    cors: { origin: '*' },
    watch: { usePolling: true },
    hmr: { protocol: 'ws' },
  }
})

Create a reproduction

No response

[rangerscience]

Dug around a bit - The websocket's open event handler doesn't seem to be triggered, and the close event is showing a close code of 1006 ("no reason"). I think the vite-dev server is rejecting the connection; I'll head over there and ask/dig.

[rangerscience]

Update;
I was running a vite dev process in another terminal. It's unclear to me if this results in a two vite dev servers running - does Storybook launch it's own?

If I'm not running the other vite dev process, then the error is instead:

GET http://localhost:3036/vite-dev/ net::ERR_CONNECTION_RESET
  ping	@	client:737
  waitForSuccessfulPing	@	client:756
  await in waitForSuccessfulPing		
  (anonymous)	@	client:562

Which is in the same execution path as the original error - just further down. Rather than continually retrying the WS connection, it's waiting until the server pings back.

So, I think that means: Is Storybook supposed to launch it's own vite-dev server, or...?

[rangerscience]

Alright - This was kind of silly, and definitely an artefact of the shenanigans I'm trying to pull.

This was the file:

config/vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "host": "0.0.0.0",
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 6006 // <------------- HERE
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

By changing the Rails/Vite default there of 3036 to the Storybook 6006, Storybook can also function as the Rails vite dev server. Neat!

(And, when running vite dev on its own, everything works as expected)

[ellyssonmike]

Thank you! I was facing this issue and it resolved!