Hot Reload shows in terminal but do not updates browser

See original GitHub issue

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

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:4
  • Comments:62 (3 by maintainers)

github_iconTop GitHub Comments

11reactions
zachbryantcommented, Sep 6, 2022

Still experiencing this in v3.1.0. Just pinned to 3.0.9 and also not working for me.

9reactions
daniloribeiro00commented, Sep 2, 2022

I had the same issue, up till vite 3.0.8. The bug seems to be fixed in the 3.0.9 version, which just came out a couple of days ago.

For me v3.0.9 fixed the issue. I’m closing this thread.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue cli 3 hot reload suddenly not working in browsers
I have to manually refresh in order to pick up the new changes. As suggested by some others I manually set poll: true...
Read more >
Hot reload does not work in Vue CLI | by KASATA | Geek Culture
Simply put, Vue CLI's hot reload is a feature that automatically restarts the server and reflects changes in the browser when you enter...
Read more >
Hot reload - Flutter documentation
Flutter's hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated...
Read more >
Untitled
WebPack Dev Server does not live reload my second HTML page when changing my SCSS, but live ... When a hot update failed...
Read more >
Write and debug code by using Hot Reload - Visual Studio ...
CSS Hot Reload: You can change CSS files while the app is running, and changes are applied immediately to the running app as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found