question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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