Vite HMR cannot detect changes to components within subfolders

Question

In the Vue Vite project, I have a folder structure like this

The problem is that vite cannot detect changes (ctrl s) in A.vue or B.vue, i.e. components nested under NestedFolder in the component folder. Everything else works fine.

My vite.config.js looks like this,

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@public': fileURLToPath(new URL('./public', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'XXX',
        changeOrigin: true,
        secure: false,      
        ws: true,
      }
    }
  }
})

I've tried following the vite HMR API documentation with a custom HMR function and having it send a full reload using it.

...
plugins: [
    vue(),
    {
      name: 'custom-hmr',
      enforce: 'post',
      // HMR
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.vue')) {
          console.log('reloading json file...');
  
          server.ws.send({
            type: 'reload',          
            path: '*'
          });
        }
      },
    }
  ], ...

I looked at vite's HMR API documentation but don't know how to send update events to vite when using a custom hmr function

Any help/advice on how to resolve this issue would be greatly appreciated.

Answer 1

Okay, I solved the problem. The problem is not with nested folders. Vite seems to ignore components imported using absolute paths.

For example, Vite will not detect changes to imported components:

import Dropdown from '@/components/GlobalDropdown.vue'
//@ resolves to /src

But detect changes relative to imports:

import LoadingSpinner from '../LoadingSpinner.vue'

I can't find any setting that fixes this issue. But the relative path of the component import solves this problem. Is this a problem?