HMR doesn't work for NPM library components that are appended to a slot

[lingosandi]

Version

3.2.33

Reproduction link

github.com

Steps to reproduce

1. download code as zip from https://github.com/lingo3d/vue-bug-example-client
2. yarn install & yarn dev
3. open src/App.vue
4. try changing message prop in the outer component, HMR should update your page immediately
5. try changing message props in the child component, you can see that no change occurs until you manually refresh the page

What is expected?

HMR should update the child component when props are changed, just like it does for the parent component

What is actually happening?

HMR fails to update the child component

---

this phenomenon doesn't occur during dev. It only appears when a library is build using Vite's library mode and uploaded to NPM, and is installed by a client. This presents a huge problem for library authors. You can find the source code and build settings of the test library from here: https://github.com/lingo3d/vue3-bug-example

[lingosandi]

Correction: this phenomenon doesn't only happen with Vite. The same test library built with @vue/cli exhibits identical behavior.

[rtek]

@lingosandi the vue3-bug-example repo is missing the source. I might be having the same issue demoed at https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue

[lingosandi]

@lingosandi the vue3-bug-example repo is missing the source. I might be having the same issue demoed at https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue

I've uploaded the code, thanks for catching that

[ragokan]

I am also having this issue in Vite. I get the [vite] hot updated: /src/pages/data/category.vue log on my console, yet nothing is updated. I use this with vue-router, so when I change the page and come back, I can see the update.

[molvqingtai]

In the same problem, I use elements-plus, the console has hmr log, but the page will not be updated

[adarshmadrecha]

Same issue. Using Quasar + Windi + Vite

[esfox]

Using PrimeVue 3's DataTable component, I experience this issue as well. (Was linked here from this).

One workaround I did was to add :key="Date.now()" in the component that wasn't refreshing.

[MilkoEmanuilov]

I've had the same issue with nuxt3 + vite + vuetify.
In my case adding
server: { watch: { usePolling: true, }, },
This solved the problem for me but for the solution that is posted did not work.
Is there anyone who have any suggestion?

[daniloribeiro00]

I've had the same issue with nuxt3 + vite + vuetify. In my case adding server: { watch: { usePolling: true, }, }, This solved the problem for me but for the solution that is posted did not work. Is there anyone who have any suggestion?

It didn't work for me (vue 3 + vite)

[aronsuarez]

Same problem with vue 3 + vite + primevue

[cnguyen-de]

Have the same issue, currently doing a migration vue 2 -> 3, application is in compat mode. We have vite 3 + vue 3, polling also doesn't work.

[tintin10q]

For me the solution by @MilkoEmanuilov worked. But it updates much slower than before.

[daniloribeiro00]

I tried it too, but it didn’t work for me.

[EzeFSpa]

Exactly the same thing happens to me too.
When I modify a property of a component, the web page does not refresh it. If I modify any common html element (div, span) it does refresh.

This solution:
server: { watch: { usePolling: true, }, },
it didn't work for me.

Versions:
vite: 3.1.0
vuejs: 3.2.39

[EzeFSpa]

I was playing a bit with the example (https://stackblitz.com/edit/vite-auuvqt?file=src%2Fcomponents%2FWrapper.vue) and I discovered that if the properties are associated to a ref variable, the hmr always works, but not with a value expressed in the template

This was what I tried and works:

The Child component with its associated aPropRef property is correctly updated in the browser if its value is changed in <script setup>.

Another test I did:
Change the properties of the other Child components with text in the template section and at the end change the value of aPropRef and the browser will reflect ALL the previous changes.

I hope this helps

[yyx990803]

This has been fixed by #4077 (>=3.2.38)

[aronsuarez]

This issue still persist

vue 3.2.45
vite 3.2.4
primevue 3.22.3

Is there any workarround?

[IamDamba]

Same for me too, the probleme is still here:
@vitejs/plugin-vue 4.0.0,
vite 4.0.0

[VamoCodar]

he same problem with Hot reload not updating
It happened to me

vue 3.2.45
quasar/app-vite: 1.2.1,
quasar: 2.11.10,

I changed the vue to version 3.2.38 and it solved

[sanba-anass]

the issue is still there using the latest version of vue , not using any libray just changing a prop does not hot reload anything
iwas using this to get my props :
const props = defineProps(['msg']);
const msg= props.msg

switching to this fixes the issue :
const props = defineProps({
msg: {
type: String,
required:true
},
});