Vitejs: WebSocket connection to 'wss://host:port/' failed due to HMR

Question

I deployed a Vue page with Docker and Kubernetes and it is working. However, even though I disabled HMR, Vite keeps refreshing after an error:

WebSocket connection to 'wss://dashboard.default.io:8181/' failed:

[vite] server connection lost. polling for restart...

Dockerfile:

FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" ]

yarn dev calls vite command

vite.config.js:

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: false
  }
})

vue.config.js:

module.exports = {
    devServer: {
      proxy: 'https://backend.default.io'
    }
  }

package.json:

"dependencies": {
    "yarn": "^1.22.18"
}
"devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "vite": "^2.5.1",
}

I could not figure out why it is still using HMR since I disabled it. And, how can I fix this? I also tried server.hmr.clientPort: 443 but it also did not work.

It would be sufficient to just disable hmr.

have u resolve this problem ? i got the same issue and looking for solutions — fosterushka, Jun 14 '22 at 10:06
me too I used nginx, and configure it with this tutorial https://www.nginx.com/blog/websocket-nginx/ — elMatador, Sep 07 '22 at 11:11

Simon Angatia · Answer 1 · 2023-01-11T06:14:51.253

5

I was facing the same issue in a Laravel Inertia-Vue js app in production. I solved it by adding the following server configurations to vite.config.js.

export default defineConfig({
plugins: [
   ...
],
server: {
    port: 3000,
    https: true,
    hmr: {
        host: "yourdomainname.com",
        port: 3001,
        protocol: "wss",
    },
},

});

For more information, refer to this link: https://github.com/vitejs/vite/pull/1926

update If it refreshes when it is in production, go to the public folder and find a file named .hot. Delete that file and everything would work well.

edited Jan 11 '23 at 06:14

answered Oct 12 '22 at 05:08

Simon Angatia

688
1
10
16

Didn't work for me on local environment. `WebSocket server error: Error: listen EACCES: permission denied 127.0.0.1:433 at Server.setupListenHandle [as _listen2] (node:net:1723:21) at listenInCluster (node:net:1788:12) at GetAddrInfoReqWrap.doListen [as callback] (node:net:1937:7) at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:8)` – geoidesic Jul 24 '23 at 21:02

Vitejs: WebSocket connection to 'wss://host:port/' failed due to HMR

1 Answers1