Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

If an app has the tailwind plugin installed, the vue plugin fails to pick up on changes in vue sfc modules if those modules are outside of the package's root directory and are loaded dynamically.

Reproduction

https://github.com/unshame/vue-hmr-bug-tailwind-4

Steps to reproduce

Install and run two apps:

cd app-hmr-broken
npm install
npm run dev

# Another terminal window
cd app-hmr-works
npm install
npm run dev

Modify components/src/Button.vue.

Expected:

HMR works in both apps.

Actual:

HMR only works in app-hmr-works, but not in app-hmr-broken.

Explanation

The bug is triggered by tailwind, which makes vite load every module additionally as an "asset", and that asset module gets picked up as the "main" module by vite plugin vue here https://github.com/vitejs/vite-plugin-vue/blame/plugin-vue%406.0.1/packages/plugin-vue/src/handleHotUpdate.ts#L339

This only happens if the "asset" module is added first, which happens if the module is dynamically loaded.

This causes vite to skip hmr for the module if the url of the asset and js modules are the same length, which they are when the module is outside of the root of the package.

To me this seems like an issue with this plugin and not tailwind, since it seems to make the assumption that the module with the shortest url and without certain query parameters is the "main" module, without accounting for the module's type.

Note that I encountered this in a monorepo and tried to boil it down to the bare minimum in the reproduction, which made it fairly nonsensical. It makes sense in the real app.

I tested this with tailwind 3 and 4.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor             
    Memory: 9.24 GB / 31.92 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.3.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.1.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 142.0.7444.136
    Edge: Chromium (140.0.3485.81)
    Firefox: 139.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @vitejs/plugin-vue: ^6.0.1 => 6.0.1 
    vite: ^7.1.11 => 7.2.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.