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 mand

vite.config.js:

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

vue.config.js:

module.exports = {
    devServer: {
      proxy: ''
    }
  }

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.

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 mand

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.

• javascript
• vuejs3
• vite
• webpack-hmr

Share Improve this question Follow edited Apr 21, 2022 at 15:09 Harun Sasmaz asked Apr 21, 2022 at 14:54 Harun SasmazHarun Sasmaz 24111 gold badge66 silver badges1212 bronze badges 3

• have u resolve this problem ? i got the same issue and looking for solutions – fosterushka Commented Jun 14, 2022 at 10:06
• 1 I used nginx to render, it resolves the issue. – Harun Sasmaz Commented Jun 14, 2022 at 11:09
• me too I used nginx, and configure it with this tutorial nginx./blog/websocket-nginx – elMatador Commented Sep 7, 2022 at 11:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.",
        port: 3001,
        protocol: "wss",
    },
},

});

For more information, refer to this link: https://github./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.

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,
    },
  }
})