Error: Rails7, Vite3 and HMR

Solution:

import { defineConfig } from 'vite'

import RubyPlugin from 'vite-plugin-ruby'

import FullReload from "vite-plugin-full-reload";

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [

RubyPlugin(),

FullReload(["config/routes.rb", "app/views/**/*"], { delay: 200 }),

vue()

],

server: {

// Solution: https://coder.com/docs/v1/latest/guides/troubleshooting/vite-hmr

// Error: [vite] Direct websocket connection fallback

hmr: {

clientPort: 3036

},

},

})

Error:

WebSocket connection to 'ws://127.0.0.1:5100/vite-dev/' failed:            client.ts:78

[vite] Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.         client.ts:59

References:

• https://coder.com/docs/v1/latest/guides/troubleshooting/vite-hmr