HMR issue with named slots

[AlexandreBonaventure]

Version

2.6.5

Reproduction link

https://github.com/AlexandreBonaventure/vue-hmr-bug

Steps to reproduce

1. run the dev server
2. change the content inside the named slot test here : https://github.com/AlexandreBonaventure/vue-hmr-bug/blob/master/src/App.vue#L5
3. see in the browser nothing has changed
4. uncomment that: https://github.com/AlexandreBonaventure/vue-hmr-bug/blob/master/src/App.vue#L4
5. see in the browser HMR is working again as expected

What is expected?

That HMR works even if the default slot is not overriden.

What is actually happening?

If the default slot is not overridden (content set in the parent scope), HMR does not trigger a re-render for named slots content.

---

ps: sorry here for the minimal repro with a build step, but dunno how else we can do it!

[yyx990803]

Fixed in vue-hot-reload-api 2.3.2: https://github.com/vuejs/vue-hot-reload-api/releases/tag/v2.3.2

[fk1blow]

i'm having the same issue as well; clone this https://github.com/fk1blow/vue-test-hmr

If you try to modify the src/components/TestBudgets.vue script file(like adding another console.log inside the onClick method), it won't reinitialize the component.

A strange thing to notice is that if i modify the src/components/HelloWorld.vue(the component that renders both the scoped-slot component and the target component that loses hmr) template and then save it, the hmr comes back.

vue: 2.6.10
vue-cli-service: 3.7.0

[Bastczuak]

I can also report that this is still an an issue for me using render functions with scoped slots.

[renaldasrep]

@yyx990803

Still an issue for me as well, checked node_modules/vue-hot-reload-api/package.json, it says 2.3.4, but components inside named slots are reloaded inconsistently

Adding boolean props without explicit value, say adding/removing outlined doesn't reload
but :outlined="true" / :outlined="false" reloads

Removing entire html elements inside component also doesn't reload, but editing prop values of those elements does

[nadirabbas]

@yyx990803

I can confirm this is still happening as of Oct 2021. I have a Tabs component that renders the slot based on the active tab, whenever I change anything in any of the Tabbed components, the HMR doesn't work.

Tabs.vue

<!-- Tab content -->
    <div class="mt-6 w-full">
      <keep-alive>
        <slot :name="tabs[activeTab].name || tabs[activeTab].text" />
      </keep-alive>
    </div>

[lukasborawski]

The same for me. Actually the same case. @nadirabbas have you found any solutions? Which is worse I have some lib that is loading inside the slot and it's rendering content just for the first tab slot.

[lukasborawski]

@yyx990803 Can anybody reopen this issue? Looks like it's not still resolved for many. Thanks.

[nadirabbas]

The same for me. Actually the same case. @nadirabbas have you found any solutions? Which is worse I have some lib that is loading inside the slot and it's rendering content just for the first tab slot.

Nah I haven't, I have just created a keybind to force refresh the component XD

[niksy]

This is still issue. What can we do to help to get this fixed?

[nadirabbas]

@niksy you can make vue use the version of vue-hot-reload-api v2.3.2.

[niksy]

@nadirabbas I’m using 2.3.4 and still experiencing issue. I’ve tried to apply changes to both rerender and reload methods and it seems to be working but I’m not sure if that’s the right way.

[RowinRuizendaal]

Any updates on this? I am still experiencing the issue :(