HMR triggers full page load on component edit
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- nuxt, tailwindcss, typescript, vite
- Domain
- build-system, frontend, tooling
Research direction
Start with the StackBlitz reproduction and compare the HMR logs when the Tailwind module is installed versus absent. Check edits to pages/index.vue, components/not-used.vue, and utils/test.ts; done means unused component and TypeScript changes no longer trigger a full page reload.
Written by the indexing model from the issue text.
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:
bun@1.1.18 - Builder:
- - User Config:
compatibilityDate,devtools,modules - Runtime Modules:
@nuxtjs/tailwindcss@6.12.2-1720701009.60a4bba - 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
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 192
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt-modules/tailwindcss
-
Version 6 Openbug
Difficulty 4/5 3-5 days Newbie friendliness 35/100
nuxt-modules/tailwindcss#1042 ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 35/100
nuxt-modules/tailwindcss#1039 · 2 comments ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 45/100
nuxt-modules/tailwindcss#1034 · 1 comment ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 35/100
nuxt-modules/tailwindcss#1033 · 1 comment ·
-
question
Difficulty 3/5 1-2 days Newbie friendliness 30/100
nuxt-modules/tailwindcss#1031 · 7 comments ·
All issues in nuxt-modules/tailwindcss
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·