5

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

enter image description here

The problem is vite doesn't detect changes (ctrl+s) in A.vue or B.vue i.e., components nested under NestedFolder in components folder. Everywhere 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 custom HMR functions as per the vite HMR API docs, got it to send full reload using this.

...
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 through vite's HMR API docs but couldn't figure out how to send update event to vite when using custom hmr function

Any help/suggestion on how to solve this would be greatly appreciated.

Moorish Awan
  • 193
  • 2
  • 12
  • I [cannot reproduce](https://stackblitz.com/edit/vue3-vite-starter-ecc14l?file=src%2Fcomponents%2FNestedFolder%2FB.vue,src%2Fcomponents%2FNestedFolder%2FA.vue). Can you share a link to a reproduction of the problem? – tony19 Aug 19 '22 at 23:59
  • Which version of Vite are you using in your project? I suspect updating to the latest stable version may resolve your issue. You may need to refactor your configuration to the latest too. – JStanton Aug 22 '22 at 08:08
  • Cannot reproduce, too. Please provide more information. – Kurt Aug 24 '22 at 04:52
  • @tony19 I tried to reproduce the problem on stackblitz and codesandbox but couldn't. It's helpful to know that this is not default behavior. I assumed I needed to configure it for nested folders. The project is really huge. Maybe some other package is interfering with vite configuation. Thank you. – Moorish Awan Aug 24 '22 at 14:29
  • @JStanton I'm using v3.0.1 – Moorish Awan Aug 24 '22 at 14:31

2 Answers2

6

Ok I solved the problem. The problem is not with nested folders. Vite seems to ignore components that are imported with absolute path.

E.g. Vite doesn't detect changes in components imported as:

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

but detects changes in imports that are relative:

import LoadingSpinner from '../LoadingSpinner.vue'

I couldn't find any setting that addresses this. But having relative paths for component imports solved the issue. Is this an issue?

Moorish Awan
  • 193
  • 2
  • 12
4

I think issue is that you made a caseSensitive typo, please check that your path is correct, I had similar issue and this was one letter typed in uppercase.

Ilya Moskovkin
  • 67
  • 8
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 12:52
  • Yep. My import statement in code was all lowercase, but my nested folder name mistakenly had an uppercase letter. – James Lawruk Apr 06 '23 at 15:46
  • It was not a case sensitive typo. The problem was solved by using not using alias imports as mentioned below. Thank you. – Moorish Awan Apr 24 '23 at 15:17