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.

dajpes commented 1 year ago

@lehni

Where did you apply that change?

AlbinCederblad commented 1 year ago

Experiencing the same thing here. I have to manually refresh browser to see changes... 😢

"vite": "^3.1.4"

AlbinCederblad commented 1 year ago

Experiencing the same thing here. I have to manually refresh browser to see changes... 😢

"vite": "^3.1.4"

Ah my issue was that for some reason my code was trying to use a variable before it was initialized, shuffled some stuff around and now it's working correctly again.. Very very strange bug. I initialized a new project with react-ts, copied over my old code and there it's working fine.

Developifyer commented 1 year ago

For me, Vite won't hot reload imported Class components but does fine with imported functional components. It will reload a Class component if I save the main.jsx (importing file) but not the module I'm currently working on. I'm assuming it has something to do with Class components using the render() function instead of relegating that task to the importing module? Any ideas?

Edit: Is there a way to set it up so that hmr always updates main.jsx as well as any module I'm currently saving?

lpona commented 1 year ago

Good. This is someone who has solved the problem? What version do I need to downgrade from vite to have it refresh the browser window itself? Or should I do something else?

lehni commented 1 year ago

Where did you apply that change?

@dajpes at the root level of your code. Ideally wrapped in an if () statement since production code will set import.meta.hot to false:

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.
    // Why the stored `deps` are missing this part of the URL, I cannot say…
    const updates = []
    for (const update of event.updates) {
      updates.push(update, {
        ...update,
        acceptedPath: update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
      })
    }
    event.updates = updates
  }
}

zachbellay commented 1 year ago

@lehni When you say root level, do you mean to add this script inside of the index.html file?

For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

    <script type="module"> 
      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.
          // Why the stored `deps` are missing this part of the URL, I cannot say…
          const updates = []
          for (const update of event.updates) {
            updates.push(update, {
              ...update,
              acceptedPath: update.acceptedPath.replace(/\?v=[0-9a-f]+&/i, '?')
            })
          }
          event.updates = updates
        }
      }
    </script>

  </body>
</html>

zachbellay commented 1 year ago

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.

lehni commented 1 year ago

@zachbellay yes this should work. Did you test it? Does it not resolve the issue?

mcometa commented 1 year ago

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.

We have a similar setup and I can confirm that this is working for me using vite@3.0.7.

Thank you!

lpona commented 1 year ago

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 :)

Jebble commented 1 year ago

Started to notice this issue after upgrading to Vite 4, changes to reflected even though the console shows the file being updated through HMR.

Upgrading Vue from 3.1.0 to 3.2.45 solved it for me.

majo44 commented 1 year ago

I'm facing same issue. In my case module is loaded to browser, and accepted, but hot reload do not cause react rerendering. If I will force rerender of components tree eg by resize window, new component version will be rendered properly. Vite 4.

vitejs / vite