Subscribe on changes!

[Bug] HMR does not work in 3.3 alpha 9

avatar
Apr 11th 2023

Vue version

3.3.0-alpha.9

Link to minimal reproduction

https://github.com/martinszeltins/vue-hmr-3.3

Steps to reproduce

I wanted to try out the new Vue 3.3 alpha 9 release but I found that HMR is not working.

1. Start a new Vue project pnpm create vite my-vue-app --template vue-ts

2. Install PrimeVue pnpm install primevue primeicons

3. main.ts

import App from './App.vue'
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

4. App.vue

<template>
    <TabView>
        <TabPanel header="My Tab">
            This content does not HMR refresh automatically 😞
        </TabPanel>
    </TabView>
</template>

<script setup lang="ts">
    import TabView from 'primevue/tabview'
    import TabPanel from 'primevue/tabpanel'
</script>

5. package.json - update to latest versions of Vue and Vite

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "primeicons": "^6.0.1",
    "primevue": "^3.26.1",
    "vite-plugin-warmup": "^0.0.2",
    "vue": "3.3.0-alpha.9"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vite": "4.3.0-beta.4",
    "vue-tsc": "1.3.14"
  }
}

6. Edit App.vue the content inside TabPanel and you will see that the content does not refresh automatically unless you refresh the whole page

What is expected?

The expected behavior is that if you update the content text inside of App.vue then it should automatically HMR refresh but it does not happen and you need to refresh the whole page to see the changes.

What is actually happening?

The content of the component does not refresh automatically with HMR.

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 20.63 GB / 31.14 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Firefox: 111.0.1
  npmPackages:
    vue: 3.3.0-alpha.9 => 3.3.0-alpha.9

Any additional comments?

No response