vite: Hot Reload shows in terminal but do not updates browser

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

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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 63 (3 by maintainers)

Most upvoted comments

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

+12

zachbryant on Sep 6, 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.

+11

daniloribeiro00 on Sep 2, 2022

Also exact same issue here with React. browser console shows me “[vite] hot updated: /src/components/FooBar.tsx” but the component is not getting rerendered (?). After hard page reload -> component change is visible 🧐

Vite 2.9.5 Vite Plugin-React: 1.3.1

dangenendt on Dec 3, 2022

Interestingly I’m having the same HMR issue but with react.

If I downgrade to vite@2.6.14 it works as expected. But in the new versions I see the terminal notice but nothing happens in the browser. Replaced it with preact (just to test) and the same thing so I believe the issue might be with vite’s HMR or the @preact/preset-vite and/or @vitejs/plugin-react-refresh packages.

adrianocr on Apr 24, 2022

I’ve tried again with Vite 3.0.2. It kinda works for some props but not all of them. For example, Tailwind CSS classes do not update and I have to reload the entire page. It used to work for everything.

daniloribeiro00 on Jul 20, 2022

I have the same problem, I use element-plus

0773 on Apr 21, 2022

same problem here , vite , vue, tailwind

vrman on Oct 27, 2022

Looks like it’s an upstream issue since it happens not only with Vite. https://github.com/vuejs/core/issues/5767#issuecomment-1104467887

sapphi-red on Apr 21, 2022

Jumping in on this since I found this same behavior while evaluating vue and distilled it down to this contrived example.

https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue

There is something about looping over useSlots().default() that’s breaking the HMR. Again - just evaluating here so I don’t understand what’s really going on - but I’ve had all sorts of HMR issues with many popular components and they seem to use this slot looping pattern.

rtek on Apr 21, 2022

I am also still having this issue in v3.1.0. I get the hmr update message in the console but the browser does not update.

Browser: Edge v105.0.1343.33 IDE: Webstorm v 2022.2.1

DRD161 on Sep 14, 2022

Hey folks! Yesterday I experienced something related, but really weird. When saving the file, browser was updated, but duplicating the component on screen. Today, it isn’t updating at all… It’s brand new project, created using vue3 initiator. I will make some tests creating using vite. For now, looks like the bug still persists.

dbomfim on Aug 13, 2022

@adrianocr @3lang3 @daniloribeiro00

TL;DR: You might need to change the component export to export default.

I found the HMR issue with template preact-ts and find a discussion thread might be related:

https://github.com/vitejs/vite/discussions/4577#discussioncomment-1161007

I tested on the vite template preact-ts, when template inits, HMR is not working, but when I change to export default it works well.

tannineo on Jul 10, 2022

a nice solution is add plugin vite-plugin-live-reload add import liveReload from 'vite-plugin-live-reload'in vite.config also use in plugin liveReload('.path'), it works 😃

lpona on Dec 15, 2022

May not be related to this specific issue, but what fixed it for me was a stupid mistake. I am using django-vite and in my index.html file I added this script when in development:

<script type="module">
    import RefreshRuntime from 'http://localhost:3000/@react-refresh'

    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {
    }
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
</script>

As it turned out, I was serving all of my static assets from /static/ so changing import RefreshRuntime from 'http://localhost:3000/@react-refresh' to import RefreshRuntime from 'http://localhost:3000/static/@react-refresh' fixed my issue.

zachbellay on Dec 12, 2022

Was able to fix this bug by moving the file that wasn’t updating into another folder, update references to it, then move it back to the original folder.

Damn, that was a weird fix, but it worked for me. Vite what’s happening with you?

Same here!

ewazgorzelska on Sep 29, 2022

Was able to fix this bug by moving the file that wasn’t updating into another folder, update references to it, then move it back to the original folder.

Damn, that was a weird fix, but it worked for me. Vite what’s happening with you?

ogmzh on Sep 29, 2022

Was able to fix this bug by moving the file that wasn’t updating into another folder, update references to it, then move it back to the original folder.

ARadovski on Sep 28, 2022

in my project, the React/ReactDOM are all from external, so when i use change my local code the update msg is shown at the terminal but no update in the browser.

i got the reason is ReactDOM from external is production mode and not support refresh features, what can i do cuz i have to use external for the historical reasons?

dqm07 on Aug 29, 2022

any updates on this one? for me it only happens with .vue files, .js files appear to be causing a full reload

chemeng on Jun 22, 2022

Interestingly I’m having the same HMR issue but with react.

If I downgrade to vite@2.6.14 it works as expected. But in the new versions I see the terminal notice but nothing happens in the browser. Replaced it with preact (just to test) and the same thing so I believe the issue might be with vite’s HMR or the @preact/preset-vite and/or @vitejs/plugin-react-refresh packages.

I’m having json hmr issue with react

3lang3 on Apr 24, 2022