Vite HMR Websocket Connection failed

[crtl]

When creating a new project and also on my existing project I get the following error when running npm run dev in the browser:

client:535 WebSocket connection to 'ws://127.0.0.1:24678/' failed: 
setupWebSocket @ client:535
(anonym) @ client:530
client:556 [vite] server connection lost. Polling for restart...

To fix this issue I have to set the host to localhost in vite hmr options:

await app.register(remixFastify, {
    viteOptions: {
        server: {
            hmr: {
                protocol: "ws",
                host: "localhost",
            }
        }
    }
});

[swalker326]

Do you have a repo link? When I run npx create-remix@latest --template mcansh/remix-fastify/examples/vite and npm run dev the app is running on localhost:3000

[crtl]

@swalker326 The error happens client side.

[swalker326]

[crtl]

ive tried it again it cant connect:

(base) crtl@DESKTOP:~/projects/crtl$ npx create-remix@latest --template mcansh/remix-fastify/examples/vite

 remix   v2.11.2 💿 Let's build a better website...

   dir   Where should we create your new project?
         test-remix-fastify

      ◼  Template: Using mcansh/remix-fastify/examples/vite...
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./test-remix-fastify
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

(base) crtl@DESKTOP:~/projects/crtl$ cd test-remix-fastify/
(base) crtl@DESKTOP:~/projects/crtl/test-remix-fastify$ npm run dev

> dev
> cross-env NODE_ENV=development tsx --watch-path ./server/index.ts ./server/index.ts

✅ app ready: http://127.0.0.1:3000

Console output is:

Maybe it is relevant that i am running it from WSL2.

node -v
v22.7.0

Ive also tried running in inkognito mode to make sure no browser extensions are interfering but the result is the same.

[swalker326]

Interesting, do you see the same error when you run npx create-remix@latest and run the app?

[crtl]

No. The default remix template works fine.

[mcansh]

i haven't experienced this either and we're not doing anything different than the official templates do in the vite config

[crtl]

Its not a huge problem. The workaround ive posted works and I just wanted to document it here in case someone else has the same problem. Ive you need more info about my environment tell me. Otherwise we can close this too.

Heres my current solution. It seems only the host is relevant.

// vite.config.ts
import {vitePlugin as remix} from "@remix-run/dev";
import {defineConfig} from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    envDir: "./",
    server: {
        hmr: {
            host: "localhost"
        }
    },
    plugins: [
        remix({
            future: {
                v3_fetcherPersist: true,
                v3_relativeSplatPath: true,
                v3_throwAbortReason: true,
            },
        }),
        tsconfigPaths(),
    ],
});