CODEWITHSUNDEEP
vuejs3vitehot-reload
Giuseppe
Giuseppe

Reputation: 175

Vue3 Vite Hot Reload (HMR) no working in the browser

I'm developing a vue3 project with vite. The HMR doesn't working fine in my dev enviroment. When a vue file edited, vite handle the change and send a message thru websocket correctly

{"type":"update",
"updates":[{"type":"js-update","timestamp":1669740364450,"path":"/src/views/user/LoginView.vue","explicitImportRequired":false,"acceptedPath":"/src/views/user/LoginView.vue"}]}

but in the browser (I tried different ones) nothing happened. Any solution?

my package.json

{
  "name": "frontendq",
  "private": true,
  "version": "0.9.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@quasar/extras": "^1.15.5",
    "axios": "^1.1.3",
    "moment": "^2.29.4",
    "quasar": "^2.10.2",
    "vue": "^3.2.45",
    "vue-i18n": "9",
    "vue-recaptcha": "^2.0.3",
    "vue-router": "^4.1.6",
    "vue3-cookies": "^1.0.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.2.3",
    "@vitejs/plugin-vue": "^3.2.0",
    "sass": "1.32.12",
    "vite": "^3.2.4"
  },
  "packageManager": "[email protected]"
}

Upvotes: 7

Views: 25802

Answers (8)

Doctor One
Doctor One

Reputation: 41

In my case deleting hmr from vite.config.js solved the issue.

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools()
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
});

Upvotes: 1

Karina Wangsa
Karina Wangsa

Reputation: 1

Specifying the hmr protocol fixed it for me.

hmr: {
  protocol: 'wss',
}

Upvotes: 0

Isaac
Isaac

Reputation: 1

If anyone else landing here and no solution works I recommend you to check the connection the browser is opening, on DevTools, network and WS, and start over there. If you are using NGINX or any other reversed proxy they may be blocking the connection with VITE. Sometimes your page may also be rejecting the connection if it is not secure.

meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"

Websocket connection fails on localhost because of Content Security Policy?

Upvotes: 0

Zoidbergseasharp
Zoidbergseasharp

Reputation: 4538

Disabling vite-plugin-checker fixed it for me

Upvotes: 0

rabbitt
rabbitt

Reputation: 149

For anyone landing here and the other solutions are not working, double check your vite config and make sure the plugin order is proper. I was calling Windi after Vue and fixing this order fixed my HMR issue.

Current config that let Hot Reload start working again:

export default defineConfig({
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src')
    }
  },

  plugins: [
    WindiCSS(),
    vue() // Originally called first
  ]
})

Upvotes: -1

Oscarhandsome
Oscarhandsome

Reputation: 33

Also, need to check correctly importing vue templates, if name in CamelCase need import in the same CamelCase, or kebab-kase, it also can affect on hmr.

<script setup>
import Quiz from "./components/Quizeeeez.vue";
</script>

<template>
  <main class="flex flex-col justify-center items-center h-full text-2xl">
    <Quiz class="max-w-2xl" />
  </main>
</template>

Upvotes: 1

Wandeber
Wandeber

Reputation: 557

I've been dealing with this issue in a project with Vue 3, TypeScript and Vite 4. I added the next to my vite.config.ts to fix the hot reload:

server: {
  watch: {
    usePolling: true,
  }
},

My entire vite.config.ts:

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    watch: {
      usePolling: true,
    }
  },
});

Added:

The usePolling setting makes Vite regularly check files for changes. It's helpful in certain environments, like containers, network file systems, or Windows Subsystem for Linux 2 in some cases, where normal file change detection doesn't work well. However, using usePolling can make your CPU work harder, as Vite's documentation warns: https://vitejs.dev/config/server-options.html#server-watch

Upvotes: 19

Jhoe Marx
Jhoe Marx

Reputation: 126

Just my two cents; I've been having this problem lately, and the solution was as simple as switching all of my files and folders to camel case.

When I clone the project to a separate computer, HMR stops working; the page simply reloads without being updated. HMR works properly on all files in my main dev machine.

Then I realized that there were a few file and folder names that were different between my local files and those in my repository. On my main machine, a few files that start with capital letters are lowercase in git. So, I changed the case of all of my files and folders to camel, and now everything is working.

Upvotes: 4

Related Questions