Hot Reload shows in terminal but do not updates browser
Problem
Describe the bug I have a Vue.js 3 + Vite + Tailwind CSS 3 project that uses a third party components library (also built with Vue.js 3 and Tailwind CSS 3) from my company's local NPM. The problem is when I change the class or any prop that affects the classes of the imported component in my project, the VSCode terminal and the browser terminal both show `hmr update /src/views/.../fileName.vue` `hmr update /src/tailwind.css` But the browser does not update and I always have to manually refresh the page with F5 to see the changes. It works correctly if I change the class of any element or component from my own project, the issue is ONLY with the third party library. This is my `vite.config.js` [code block] Does anyone know how to make the browser reflects the changes? ------- edit: added reproduction link from rtek Reproduction https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue System Info [code block] Used Package Manager pnpm Logs [code block] Validations - [X] Follow our Code of Conduct - [X] Read the Contributing Guidelines. - [X] Read the docs. - [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [X] 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 https://github.com/vuejs/core instead. - [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Ser
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Enable HMR for Third-Party Components in Vite
The issue arises because Vite's Hot Module Replacement (HMR) may not be properly configured to detect changes in the third-party component library. This can happen if the library is not set up to support HMR or if Vite does not recognize the changes due to caching or module resolution issues.
Awaiting Verification
Be the first to verify this fix
- 1
Check HMR Configuration
Ensure that the Vite configuration is set up to handle HMR correctly for the third-party library. This may involve checking the 'optimizeDeps' settings in your 'vite.config.js'.
javascriptexport default defineConfig({ optimizeDeps: { include: ['your-third-party-library'] } }); - 2
Add HMR Support in Third-Party Library
If you have access to the third-party library's code, ensure that it supports HMR. This can be done by adding the following code in the entry file of the library: if (import.meta.hot) { import.meta.hot.accept(); }
javascriptif (import.meta.hot) { import.meta.hot.accept(); } - 3
Clear Vite Cache
Sometimes, Vite's cache can cause issues with HMR. Clear the cache by running the following command in your terminal: pnpm vite --force
bashpnpm vite --force - 4
Check for Duplicate Dependencies
Ensure that there are no duplicate instances of Vue or other dependencies in your project. This can cause HMR to fail. Use the following command to check for duplicates: pnpm list vue
bashpnpm list vue - 5
Update Vite and Related Packages
Ensure that you are using the latest version of Vite and related packages. Run the following command to update: pnpm update
bashpnpm update
Validation
To confirm the fix worked, make a change to a class or prop in the third-party component and observe if the browser updates automatically without requiring a manual refresh. Check the terminal for HMR messages indicating successful updates.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep