HMR documentation missing (issue)

[maeglindeveloper]

Documentation is

• Missing
• Outdated
• Confusing
• Not sure?

Explain in Detail

Hi everyone,

I'm actually working on a projet based on Vue3 using vite.
I've activated the hmr option in my vite.config.js file with the below configuration.

import path from 'path'
import { defineConfig } from 'vite'
import graphql from '@rollup/plugin-graphql'
import vue from '@vitejs/plugin-vue'
import codegen from 'vite-plugin-graphql-codegen'
import svgLoader from 'vite-svg-loader'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  plugins: [
    vue(),
    codegen(),
    graphql(),
    svgLoader()
  ],
  optimizeDeps: {
    include: [
      "vue-google-maps-community-fork",
      "fast-deep-equal",
    ],
  },
  server: {
    hmr: {
      overlay:true,
    },
    port: 3000,
  }
})

Here are the version I'm using for vite, and vite plugins

"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.3.9",
"vite-plugin-graphql-codegen": "^3.0.1",
"vite-svg-loader": "^4.0.0"

When I'm updating a vue file in my project, I can see in the console that a hmr message is fired

[vite] hmr update /src/views/basic/wine-harvests/tabs/StorageZones.vue?vue&type=template&lang.js, /src/assets/css/main.css

And in my chrome browser, I'm able to see in the WS tab the message received but still no update is made in my page 👎 .
I'm in localhost (not sure if it helps).

{
  "type": "update",
  "updates": [
    {
      "type": "js-update",
      "timestamp": 1686151520054,
      "path": "/src/views/basic/wine-harvests/tabs/StorageZones.vue?vue&type=template&lang.js",
      "explicitImportRequired": false,
      "acceptedPath": "/src/views/basic/wine-harvests/tabs/StorageZones.vue?vue&type=template&lang.js"
    },
    {
      "type": "js-update",
      "timestamp": 1686151520054,
      "path": "/src/assets/css/main.css",
      "explicitImportRequired": false,
      "acceptedPath": "/src/assets/css/main.css"
    }
  ]
}

I'm wondering if the path are good and if the fact that I'm using alias resolver can create some conflict.
Is there something to add in the documentation for this ?
Thanks for your advice everyone 🙏

Your Suggestion for Changes

None since I don't have the answer

Reproduction

No response

Steps to reproduce

No response

[bradwbradw]

there is some documentation here about HMR, not sure if it helps

https://vitejs.dev/guide/api-hmr.html

are there any errors in your browser console?

[maeglindeveloper]

Hey all 😅 ,
Well, digging into this issue, we (my team and I), finally found the problem.
We are using an acl lib that breaks the HMR when we load it. This is a known issue.
victorybiz/vue-simple-acl#15
There is no viable solution now, except using a fork as mentioned in the issue.
Thanks a lot 🙏