HMR doesn't work on Vue components

[TechAkayy]

What version of astro are you using?

2.10.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

When updating Vue component (client:load applied), HMR doesn't apply.

Here is the github repo - https://github.com/TechAkayy/pg-astro

In the stackblitz version of the github repo, in HeroSection, uncomment the console.log statement. The whole component vanishes from the page on HMR update.

Again, refresh the page, and now change the count variable from 0 to 1. HMR again breaks. Same issue, the whole component vanishes from the page.

What's the expected result?

HMR should apply correctly.

Link to Minimal Reproducible Example

https://stackblitz.com/github/TechAkayy/pg-astro?file=src%2Fcomponents%2FHeroSection.vue

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

Thanks, we'll take a look at this as soon as we can!

[natemoo-re]

I noticed that you're using both of these in the same component... is that supported? I don't think I've ever seen it before.

<script lang="ts">
  export default {
    data() {
      return {
        count: 0,
      }
    },
    mounted() {
      /* uncomment the below line */
      // console.log(this.count)
    },
  }
</script>

<script setup lang="ts">
  defineProps({
    name: {
      type: String,
      default: 'HeroSection',
    },
  })
</script>

[TechAkayy]

I just removed the second script section from the reproduction. The HMR issue still exists, and it doesn't seem to be related to the 2 script tags.

Try opening the above stackblitz link, and uncomment the console.log line. HMR breaks and the whole component vanishes from the index page.

Though very uncommon, for certain scenarios, the script setup can be used alongside normal script tag in a Vue SFC - https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script.

The above double script tags example in the SFC playground. HMR works fine if you uncomment like above and edit the component in this playground.

[natemoo-re]

Thanks for clarifying, definitely still valid then! Will continue to investigate.

[louiss0]

I decided to just ignore it but yes the component disappears in SSR. Oh I'd like to add that it takes a long time to load

[McSmog]

Need fix this too

[TechAkayy]

Hi @natemoo-re, just checking if there are any workaround for now until this HMR issue is fixed?

Could it be related to applying client directives directly on Vue components? Wondering if wrapping the Vue components in an .astro intermediary will help, though I haven't tried that.

Thanks for looking into this!

[louiss0]

Hi @natemoo-re, just checking if there are any workaround for now until this HMR issue is fixed?

Could it be related to applying client directives directly on Vue components? Wondering if wrapping the Vue components in an .astro intermediary will help, though I haven't tried that.

Thanks for looking into this!

He has not said anything in a long time. Did switching to 3.0.0 change anything?