Subscribe on changes!

[Bug] Vue 3 HMR does not work inside a default slot using PrimeVue

avatar
Nov 29th 2022

Vue version

3.2.45

Link to minimal reproduction

https://github.com/martinszeltins/vue-hmr-not-working-slot

Steps to reproduce

I don't know if this is an issue with Vue or Vite or PrimeVue... but since it has to do with HMR, I figured it must be a Vue issue.

Here are the steps to reproduce the bug:

  1. Clone and run the project.
$ git clone git@github.com:martinszeltins/vue-hmr-not-working-slot.git
$ cd vue-hmr-not-working-slot
$ npm install
$ npm run dev
  1. Now open App.vue and change the default slot of TabPanel (line 9). Then save the App.vue file and look at the browser - HMR did not work unless you manually reload the page.

All I did was take the Vite starter template and added PrimeVue.

$ npm create vite@latest my-vue-app -- --template vue
$ cd my-vue-app
$ npm install
$ npm install primevue@^3 --save
$ npm install primeicons --save

Then I added PrimeVue to main.js like this:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import AppModal from 'primevue/dialog'

const app = createApp(App);

app.use(PrimeVue);
app.component('AppModal', AppModal);
app.mount('#app')

And then I added the component in App.vue as you can see from the reproduction repo. I didn't change anything else. Something is wrong.

What is expected?

I was expecting HMR to work and auto refresh the content inside the default slot but it is not working unless I reload the whole page.

What is actually happening?

HMR is not working as expected.

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
    Memory: 9.56 GB / 31.26 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: 107.0.5304.121
    Firefox: 107.0
  npmPackages:
    vue: ^3.2.41 => 3.2.45
    primevue: 3.20.0
    vite: 3.2.3

Any additional comments?

No response

avatar
Dec 12th 2022

Duplicate of #7155