Hot Reload shows in terminal but do not updates browser

[daniloribeiro00]

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

• [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 Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[rtek]

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.

[0773]

I have the same problem, I use element-plus

[sapphi-red]

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

[adrianocr]

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

If I downgrade to [email protected] 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.

[3lang3]

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

If I downgrade to [email protected] 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

[daniloribeiro00]

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

If I downgrade to [email protected] 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 tried to downgrade to 2.6.14 but it still doesn’t work as expected. 🤦🏼‍♂️

[dangenendt]

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

[BigKamil5]

Same issue here. For me it happens sometimes, when copying nested components from one project/folder to another, when hmr is running. It seems like vite has some weird problem with new component files with deps The weirdest part is that nothing really helps with it. Restarting dev server does nothing. Clear '.vite' or whole 'node_modules' does nothig. Clearing browser cache, still nothing. Clearing npm cache, nope One things that help is to move component, which hmr 'forgot' to another folder. For some reason this works like a charm for me... but it's so frustrating, pls help :')

[chemeng]

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

[tannineo]

@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.

[daniloribeiro00]

@tannineo

The components I'm using are from a external lib, so there's no way to change the exports

[0773]

I have the same problem, I use element-plus

bug fixed in vite 3.0

[daniloribeiro00]

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.

[dbomfim]

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.

[tintin10q]

This just started happening to me as well. The updates only come through when I restart my dev server. I tried updating to vite 3.0.8 but that did nothing.

[kresli]

It started happening to me as well. Disabled browser cache but still receiving old component. Terminal log page reload successfully and browser auto refresh works as expected. The issue must be with serving those files via server.

EDIT: To fix this issue you need to rename file to something else and then rename it back. I'm not sure why but this fixed the issue.

[artisin]

~~Ran into the same issue and resolved it by ensuring the proper file permissions. I’m using gulp to preprocess my styles and the output file permission was 755 (-rwxr-xr-x) but by changing the output file permission to 644 (-rw-r--r--) fixed my issues.~~

EDIT: Meh, I spoke too soon. Unfortunately I lack the time to debug the issue so for now a good old-fashioned link tag will have to do.

[Manuelbaun]

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.

[dqm07]

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?

[daniloribeiro00]

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.

[zachbryant]

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

[patak-dev]

@zachbryant could you open a new bug report with a minimal repro against 3.1?

[DRD161]

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

[olcens]

I'm getting exactly the same issue with all my *.styled.tsx files. What is weird, when I put the styled-components files above my component in the same file it updates just fine. But if I leave them in Component.styled.tsx and import them in given component, I only get the update message in the console but nothing happens.

Vite v3.0.9

[ARadovski]

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.

[ogmzh]

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?

[ewazgorzelska]

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!

[quroom]

solution for me Remove that folder includes the code is not working. And then create all codes with new folder. It's working to me.

For me

1. Remove router folder and all files in that folder.
2. Remove views folder and all files in that folder.
3. Create those files.

Not It seems to work perfectly. I guess some code location hashes, to find path fastly, are broken.

[refjord]

Same issue - Not working, no matter what I try.

Using Inertia / Vue 3 / Vite 3.0.9

[quroom]

Same issue - Not working, no matter what I try.

Using Inertia / Vue 3 / Vite 3.0.9

What did you try? If you leave more detais, someone can help you.