HMR triggers full page load on component edit

オープン
#877 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
nuxt, tailwindcss, typescript, vite

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

bug
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

主要言語
TypeScript
スター
1.9k
フォーク
192
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nuxt-modules/tailwindcss のほかの issue

nuxt-modules/tailwindcss の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。