HMR broken since 2.3.7

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.

[yyx990803]

AFAIK already fixed post 2.3.8 in 6eaec3ab

[NickSdot]

For reference: https://github.com/tailwindlabs/tailwindcss/issues/4978