Hot Reload shows in terminal but do not updates browser
See original GitHub issueDescribe 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
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 8080,
},
});
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
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 6.53 GB / 15.78 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44)
Internet Explorer: 11.0.19041.1566
npmPackages:
@vitejs/plugin-vue: ^2.0.0 => 2.3.1
vite: ^2.9.5 => 2.9.5
Used Package Manager
pnpm
Logs
vite:load 1.18ms [fs] /src/views/Monitoring/MonitoringShow.vue +6s
vite:hmr [self-accepts] src\views\Monitoring\MonitoringShow.vue +57ms
vite:import-analysis 13.99ms [8 imports rewritten] src\views\Monitoring\MonitoringShow.vue +6s
vite:cache [memory] /node_modules/.vite/deps/vue.js?v=59cbbbfb +6s
vite:cache [memory] /node_modules/.vite/deps/date-fns.js?v=59cbbbfb +0ms
vite:cache [memory] /node_modules/.vite/deps/date-fns_locale_pt-BR.js?v=59cbbbfb +0ms
vite:cache [memory] /node_modules/.vite/deps/@fortawesome_free-solid-svg-icons.js?v=59cbbbfb +0ms
vite:cache [memory] /node_modules/.vite/deps/@design-system_ui.js?v=59cbbbfb +0ms
vite:cache [memory] /src/components/Dashboard.vue +1ms
vite:cache [memory] /src/services/api.ts +0ms
vite:cache [memory] plugin-vue:export-helper +4ms
vite:transform 40.79ms /src/views/Monitoring/MonitoringShow.vue +6s
vite:time 47.56ms /src/views/Monitoring/MonitoringShow.vue?import +6s
vite:load 1.90ms [fs] /src/tailwind.css +51ms
vite:hmr [self-accepts] src\tailwind.css +125ms
vite:import-analysis 0.68ms [0 imports rewritten] src\tailwind.css +122ms
vite:transform 103.92ms /src/tailwind.css +113ms
vite:time 110.01ms /src/tailwind.css?import +111ms
vite:cache [memory] /src/views/Monitoring/MonitoringShow.vue +119ms
vite:time 2.19ms /src/views/Monitoring/MonitoringShow.vue?import +5ms
vite:cache [memory] /src/tailwind.css +8ms
vite:time 2.48ms /src/tailwind.css?import +8ms
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 https://github.com/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.
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:62 (3 by maintainers)
Top GitHub Comments
Still experiencing this in v3.1.0. Just pinned to 3.0.9 and also not working for me.
For me v3.0.9 fixed the issue. I’m closing this thread.