CODEWITHSUNDEEP
javascriptvuejs3vitewebpack-hmr
Harun Sasmaz
Harun Sasmaz

Reputation: 221

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

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.

Upvotes: 2

Views: 18033

Answers (2)

sNICkerssss
sNICkerssss

Reputation: 6430

I set server.hmr.clientPort same as server.port. I works for me.

My vite.config.ts:

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
    host: true,
    strictPort: true,
    port: 5173,
    hmr: {
      clientPort: 5173,
    },
  }
})

Upvotes: 2

Simon Angatia
Simon Angatia

Reputation: 860

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.

Upvotes: 7

Related Questions