Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR triggers full page load on component edit #877

Open
SimonMarx opened this issue Jul 15, 2024 · 1 comment
Open

HMR triggers full page load on component edit #877

SimonMarx opened this issue Jul 15, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@SimonMarx
Copy link

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

@ineshbose
Copy link
Collaborator

Hey, many thanks for reporting this! ❤️

I'm trying to understand this, thinking that a PostCSS cache invalidate may cause a page to reload, but I see your point that it isn't necessary. Just linking a related issue too - vitejs/vite#5808. Bottom line is that if the vanilla installation doesn't cause a page reload, then using the module shouldn't cause it either, so I agree this to be a bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants