Vite HMR doesn't work properly if I use vue-facing-decorator/dist/index-return-cons

[rdhainaut]

Problem Description: The Hot Module Replacement (HMR) from Vite isn't functioning as expected. Specifically, when I modify a source file, using the following import import { Component, Prop, Vue } from 'vue-facing-decorator/dist/index-return-cons (or if I define an alias in the Vite config), it doesn't work properly.

If I edit line 16 of HelloWorld.vue, Vite displays a message stating that the component has been updated, but the current view doesn't reflect this change. Consequently, I am forced to manually refresh the entire page.

Expected Behaviour: In development mode (which is activated by running the npm run dev command), any changes made to a Vue file should automatically refresh the current view (or app) to reflect the latest updates upon saving the file.

I have created a minimal reproduction in this repository: https://github.com/rdhainaut/vfd-vite-hmr-issue

Note: The component where the issue can be reproduced is located here: https://github.com/rdhainaut/vfd-vite-hmr-issue/blob/master/src/components/HelloWorld.vue

[rdhainaut]

One potential "workaround" use the "vue-facing-decorator": "^3.0.0-beta.3",

Vite HMR work as expected with that version if I export my component with toNative (and bonus: vue i18n work as expected without patch see: https://github.com/facing-dev/vue-facing-decorator/issues/64)

[rdhelms]

@ruojianll Have you encountered this issue with hot reloading?

@rdhainaut would you say that releasing 3.0.0 will resolve this issue, or do you think we need to find a fix for 2.x?

[rdhainaut]

@ruojianll Have you encountered this issue with hot reloading?

@rdhainaut would you say that releasing 3.0.0 will resolve this issue, or do you think we need to find a fix for 2.x?

@rdhelms I am a little surprised that I am the only one who has reported this issue, but you can easily reproduce it with my reproduction git. In my opinion, using vue facing decorator v3 resolves the issue and is the way to go. I would be more confident if vfd v3 were a release and no longer in beta.

[ruojianll]

I reproduced this issue with the example project. HMT may can't apply class component( js class ) changes to renders. If we use import xxx form 'vue-facing-decorator' or 'toNative', the exported value is js object. I traced some code into vue-loader, but have no ideas so far. @rdhainaut
@rdhelms How about the testing of v3?

[satezmedia]

Same issue for us on Nuxt 3. Class-Based Components are not hot-reloaded and Setup components work just fine

[tomi20v]

We found this same problem too. It is preventing us (at work) from upgrading to vue3 and vite vue-cli based solutions work OK, so might not be a vue-facing-decorator problem

[Durss]

Just tried making a fresh new vue + vite +ts project using vue-facing-decorator, and I have the same issue with HMR not working. Using VFD v3.0.4.

Here are the dependencies I use:

  "devDependencies": {
    "@types/node": "^20.10.2",
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue": "^3.3.9",
    "vue-facing-decorator": "^3.0.4",
    "vue-tsc": "^1.8.22"
  }

HMR works properly with this component:

<template>
  <div>Hello World</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>

But breaks as soon as I import VFD:

<template>
    <div>Hello world</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator';
@Component
export default class App extends Vue {
}
</script>
<style scoped></style>

Websocket is properly connected and I get messages everytime I make changes on code, but those changes are not reflected on the page. I don't even have a log on the console saying "file xxx has changed blabla".

Couldn't find any solution to this so far.

[Durss]

Dunno if that may help but I've read here and there that such behavior may occur when there are looped dependencies. Maybe VFD has such looped dependencies somewhere.?

[rdhelms]

@Durss I noticed during some testing that it seemed like HMR was working with vue-facing-decorator 2.1.20. Is that the case for you as well?

[Durss]

Oh indeed ! Thank you for pointing this out that will unlock me on my project !

I also filed an issue to Vite BTW: https://github.com/vitejs/vite-plugin-vue/issues/307

[andrewmackrodt]

I'm experiencing this too and have put together a minimal repro using yarn create vite my-vue-app --template vue-ts.

From what I can tell, HMR is not working if not using toNative, i.e. https://github.com/andrewmackrodt/vue-facing-decorator-hmr-repro/compare/vue-facing-decorator...vue-facing-decorator-to-native?expand=1

[ruojianll]

Vue may remove supporting for old class component. I suggest using toNative in every recent projects, it could provide best compatibility.

[rdhelms]

@rdhainaut What are your thoughts on the status of this issue? From what I can tell, it sounds like the best option here is to export components with toNative with vue-facing-decorator 3.x.x.

Is anyone still encountering HMR issues when the components are exported with toNative?

[rdhainaut]

For me, it works as expected if you use vue-facing-decorator 3.xx and use the toNative indeed (as explain in official documentation)