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

Question

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]"
}

Mezuzah

Make new project with same package.json and vite.config.js and src works. Clearing node_modules, yarn cache --all not solve the problem. I don't understand.. – Mezuzah

Answer 1

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

None

Please add an explanation of provided configuration. – Rickierickman

Thanks. I've spent hours trying to find the solution, and that's the only one that worked. – Hying

I have the same issue (with same fix), but usePolling is not recommended, especially for big projects. Also it adds a lot of CPU resources. – Sexed

Answer 2

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.

Glairy

My problem was I renamed a vue file changing its case. HMR stopped working on that file. I renamed it again to a completely different name and HMR started up again. – Antihalation

Answer 3

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>

Goldshlag

Answer 4

Disabling vite-plugin-checker fixed it for me

Sclaff

Answer 5

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?

Erastes

Answer 6

Specifying the hmr protocol fixed it for me.

hmr: {
  protocol: 'wss',
}

Motteo

Answer 7

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

Accentor