HMR triggers full page load on component edit #877
Description
Environment
- Operating System:
Darwin - Node Version:
v20.11.0 - Nuxt Version:
3.12.3 - CLI Version:
3.12.0 - Nitro Version:
2.9.7 - Package Manager:
[email protected] - Builder:
- - User Config:
compatibilityDate,devtools,modules - Runtime Modules:
@nuxtjs/[email protected] - Build Modules:
-
Reproduction
https://stackblitz.com/edit/github-xdbpil?file=pages%2Findex.vue
Describe the bug
As soon as i install the nuxt tailwindcss module, the HMR triggers a page reload.
With tailwind module
[nuxt] builder:watch: 0.48ms
[nuxt] builder:watch: 0.521ms
vite:hmr [file change] components/not-used.vue +6s
ℹ page reload components/not-used.vue
Having a plain nuxt application, without tailwind installed will not trigger a page reload.
Without tailwind module
[nuxt] builder:watch: 0.434ms
[nuxt] builder:watch: 0.488ms
vite:hmr [file change] components/not-used.vue +11s
vite:hmr [no modules matched] components/not-used.vue +0ms
However, if you change files/components which are part of the current page, even with the tailwindcss plugin there is no complete page-reload:
With tailwind module + component is used in current page
vite:hmr [file change] components/not-used.vue +4s
[nuxt] builder:watch: 0.146ms
[nuxt] builder:watch: 0.181ms
vite:hmr [vue:update(template)] {MY_ROOT_DIR}/components/not-used.vue +1m
ℹ hmr update /components/not-used.vue, /node_modules/tailwindcss/tailwind.css
The same behaviour counts for .ts files. Changes within them will trigger a whole page reload, which does not happen without the @nuxtjs/tailwindcss module.
With tailwind module
vite:hmr [file change] utils/test.ts +9s
ℹ page reload utils/test.ts
Without tailwind module
[nuxt] builder:watch: 1.331ms
vite:hmr [file change] utils/test.ts +4s
vite:hmr [no modules matched] utils/test.ts +0ms
Additional context
No response
Logs
No response