Hot Reload shows in terminal but do not updates browser

daniloribeiro00 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

I have the same problem, I use element-plus

sapphi-red commented 2 years ago

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

adrianocr commented 2 years ago

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.

3lang3 commented 2 years ago

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

daniloribeiro00 commented 2 years ago

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

dangenendt commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

tannineo commented 2 years ago

@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 commented 2 years ago

@tannineo

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

0773 commented 2 years ago

I have the same problem, I use element-plus

bug fixed in vite 3.0

daniloribeiro00 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

patak-dev commented 2 years ago

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

DRD161 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

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

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

refjord commented 2 years ago

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

Using Inertia / Vue 3 / Vite 3.0.9

quroom commented 2 years ago

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.

refjord commented 2 years ago

It was actually a stupid mistake by me.

When setting up inertia I usually call my pages folder pages, in this case I - for some reason - named it Pages, that caused the error.

quroom commented 2 years ago

Anyway, happy coding!

vrman commented 2 years ago

same problem here , vite , vue, tailwind

daniloribeiro00 commented 2 years ago

The issue was fixed in the latest version of vite and vue

pooyaEst commented 2 years ago

same problem here , vite , vue, tailwind

Same here

The issue was fixed in the latest version of vite and vue

Not for me, did a yarn upgrade --latest but still have the same problem

Grapdevs commented 2 years ago

Hey did anybody find the solution?

quroom commented 2 years ago

Hey did anybody find the solution?

Have you ever tried this? I solved problem with this way below.

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.

Remove router folder and all files in that folder. Remove views folder and all files in that folder. Create those files. Not It seems to work perfectly. I guess some code location hashes, to find path fastly, are broken

steffenstolze commented 2 years ago

We were facing the same issue with our views folder within a very minimal app.

This doesn't work (changes are not reflected)

It works if you save the files inside views as lowercase:

Changes to files inside components and layouts are reflected, even though they are uppercase:

ldgmaia commented 2 years ago

Why this issue is closed since is not working yet? Using version 3.2.2 with React

daniloribeiro00 commented 2 years ago

@ldgmaia open again, even though somehow it works for me now

dxlliv commented 2 years ago

Remove everything from App.vue and main.ts, then recompose them gradually.
My issue was with vue3-simple-icons global components registration

sapphi-red commented 1 year ago

The original repro is fixed by https://github.com/vuejs/core/pull/4077.

For other people having issues should create a new issue with reproduction as it's a different issue.

Also for react ones, I guess those are duplicate of vitejs/vite-plugin-react#20, vitejs/vite-plugin-react#21, vitejs/vite-plugin-react#6.

btonasse commented 1 year ago

Does anybody know how to fix this? This bug is clearly not fixed

ldgmaia commented 1 year ago

Does anybody know how to fix this? This bug is clearly not fixed

I got it fixed. Actually it was my mistake. Maybe I can help. What is your stack?

btonasse commented 1 year ago

Does anybody know how to fix this? This bug is clearly not fixed

I got it fixed. Actually it was my mistake. Maybe I can help. What is your stack?

Thanks, Diego. I have just created a typescriptreact app and changed nothing in the default config. The only dependency added was styled-components.

Whenever I make a change in main.tsx or App.tsx, hot reload works as expected (and the terminal outputs [vite] hmr update /src/main.tsx). However, if the change happens in one of App's children, the terminal will read [vite] hmr update /src/UpdatedChild.tsx but the browser will not be updated. Only a manual refresh (or a change to main.tsx/App.tsx) will force it to update.

ldgmaia commented 1 year ago

If I could see your code, would help, but let's try. In the file where you are importing this child component, can you check if the import is correct, even capital letters?

btonasse commented 1 year ago

If I could see your code, would help, but let's try. In the file where you are importing this child component, can you check if the import is correct, even capital letters?

You're right, I should have provided some code. In any case, I managed to isolate the issue down to styled-components. See snippets below:

// src/components/Comptest.tsx
// Changing the props of ChildButton does NOT trigger a reload

import React from "react";
import styled from "styled-components";

interface Props {
    text: string;
}

const StyledButton = styled.button`
    color: red;
`;

class ChildButton extends React.Component<Props> {
    render() {
        return <StyledButton>{this.props.text}</StyledButton>;
    }
}

export default class ParentDiv extends React.Component {
    render() {
        return (
            <div>
                <ChildButton text="Btn1" />
                <ChildButton text="Btn2" />
                <ChildButton text="Btn3" />
            </div>
        );
    }
}

// src/components/Comptest.tsx
// Changing the props of ChildButton DOES trigger a reload

import React from "react";

interface Props {
    text: string;
}

class ChildButton extends React.Component<Props> {
    render() {
        return <button>{this.props.text}</button>;
    }
}

export default class ParentDiv extends React.Component {
    render() {
        return (
            <div>
                <ChildButton text="Btn1" />
                <ChildButton text="Btn2" />
                <ChildButton text="Btn3" />
            </div>
        );
    }
}

Do I need any extra configuration to make Vite work with styled-components ?

aihrig commented 1 year ago

I’m also having the same problem with plain JS app. Vite shows a change to the child component but does not cause a re-render to parents.

I’m using:

Vite/3.2.3
Linux-x64 (Ubuntu on wsl2 - files on the wsl storage, not going through windows mapping)
node-v18.8.0
React v18.2.0
@vitejs/plugin-react v2.2.0
postcss v8.4.19

I’ve tried moving the files and updating imports, and renaming files to lower case - as mentioned in some comments above. Casing matches files and imports. I’ve removed node_modules and reinstalled (many times).

No luck with any of that.

If there’s anything further I can add to help track this issue down I’d be happy to post.

ldgmaia commented 1 year ago

btonasse

Hi, sorry I couldn't reply earlier. Health issues happened. I took your code and applied the way I would do it and it worked correctly. You can check it at https://github.com/ldgmaia/btonasse-test

I usually don't use classes like you, but I hope this helps you.

lehni commented 1 year ago

I am experiencing the same problem and after a lot of digging in the internals I noticed that the path inside the deps that acceptedPath is being matched against is missing the version query parameter. So I tried this simple hack out that patches the incoming updates and :tada:, it works for me!

Now why the stored deps are missing this part of the URL, I cannot say…

if (import.meta.hot) {
  // Workaround for a strange Vite hot-reloading bug, see:
  // https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
  import.meta.hot.on('vite:beforeUpdate', onBeforeViteUpdate)
}

function onBeforeViteUpdate(event) {
  if (event.type === 'update') {
    // Patch `event.updates` to remove the version query parameter from path,
    // so that the update gets picked up.
    const updates = []
    for (const update of event.updates) {
      updates.push(update) // Keep the original update.
      const acceptedPath = update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
      if (acceptedPath !== update.acceptedPath) {
        updates.push({ ...update, acceptedPath })
      }
    }
    event.updates = updates
  }
}

vitejs / vite