HMR broken since 2.3.7

[dmx974]

Describe the bug

See UPDATE below.

I have pretty big project with nested components.
Basically this is what happened:
v2.3.6 --> HMR OK, everything is working fine
v2.4.0-beta-0 --> HMR not correctly updating a child component (only CSS / tailwind changes, but it doesn't react to html changes in my vue template, i.e: adding text does nothing)
v2.4.0-beta-1 --> HMR is not working anymore when I edit the child component, I got only page reloads, every change triggers a page reload

So I think you introduced or changed something in v2.4.0-beta-0 that breaks HMR in certain circonstances. Then in v2.4.0-beta-1 it always triggers page reloads

Update

Ok, I just tested EVERY build, from 2.2.4 to 2.3.8. Removed yarn.lock and node_modules each time, then yarn install each time.
2.2.4: OK
2.3.5: OK
2.3.6: OK
2.3.7: HMR not working as expected (see below)
2.3.8 to 2.4.1 --> HMR not working as expected

You have introduced something in 2.3.7 that breaks HMR.

Reproduction

I cannot really reproduce because I've 1500+ components and I'm totally lost finding why the HMR fails.

But basically:

• any change to my App.vue is working as expected (HMR working great)
• any change to a page component dynamically loaded by vue-router is also working as expected (see below site.Home.vue, if I edit that page, HMR is working as expected)

But if that page contains a child component (something like /components/Avatar.vue), then it becomes a nightmare: even a simple change to that component triggers nothing (v2.3.7) or systematically triggers a page reload starting with v2.4.0-beta-1 (including v2.4.1)

--> Everything is working fine with vite v2.3.6
--> Since 2.3.7, HRM doesn't update (but not page reload as well)

router.js

  ...
  {
    path: '/',
    meta: { layout: LayoutSite },
    component: loader(() => import('@/views/site/site.Home.vue'))
  },

I'm using a custom made loader to show a spinner (for code splitting)

loader.js

const loader = (fn) => {
  return () => {
    const timer = setTimeout(()=>{
      /* show Spinner */
    }, 50)
    
    const done = ()=>{
      clearTimeout(timer)
      /* hide Spinner */
      return
    }

    const promise = fn()
    promise.then(done, done)
    return promise
  }
}

export default loader

System Info

  System:
    OS: macOS 10.15.7
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 1.96 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 89.1.22.71
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.0.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.4 => 1.2.4 
    vite: 2.3.7 => 2.3.7 

Used Package Manager

yarn

Logs

No response

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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[y1d7ng]

Similar to this issue #4150 ，can you help to try this repo and see if there will be same bug on your side. If you are going to try this repo, change vite's version to 2.4.1 in package.json.

[dmx974]

I updated the issue, the problem starts @ version 2.3.7

[wavebeem]

Not 100% sure if my issue is related to vite itself or the react fast refresh plugin, but I'm getting either can't access lexical declaration 'React' before initialization during HMR, and _s is not a function every time afterward, even on a full page refresh.

I was able to reproduce the bug by switching to Vite 2.3.6 even.

You can see my config in this PR where I'm attempting to switch from Webpack to Vite wavebeem/pkmn.help#106

I tested the bug repo. I had to also install autoprefixer, but HMR seemed to work there for me. npm installed Vite 2.4.1.

Awesome project though, I can't wait to switch over once HMR is fixed up :)

[paraboul]

I'm seeing the same issue with tailwind (jit mode) since 2.3.7 (likely a duplicate of #4150) :

#4150 (comment)

Reproduced in this repo : https://github.com/paraboul/vue-hmr-reload

[NickSdot]

For reference: tailwindlabs/tailwindcss#4978

[yyx990803]

AFAIK already fixed post 2.3.8 in 6eaec3a