search

vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 429 forks source link

HMR does not work with class-components loaded in the router #521

Closed Evertvdw closed 2 years ago

Evertvdw commented 3 years ago

Hello there, there seems to be a HMR issue when using vue-class-components in Vue3. It seems to have to do with components that are loaded in the routes. I created a codesandbox to reproduce this issue:

https://codesandbox.io/s/fervent-haibt-htft9?file=/src/App.vue

In the 'App.vue' I created a class component in which HMR does work, try changing the text and you see it updated on the screen. In Index.vue which is put into a router-view in the routes.js file, HMR works when you use the old options syntax, but when you use the class syntax the HMR does not work anymore.

This is of course not a very nice developer experience, can this be fixed?

hjmmc commented 3 years ago

Now I rewrite the webpackHotUpdate method to achieve page auto refresh, of course this is only a temporary fix.

window.webpackHotUpdate = function () {
  window.location.reload()
}
bamboechop commented 3 years ago

HMR not working for components that are loaded via the router is a deal breaking issue for my new projects right now. Can this problem please be acknowledged and either a timeline be given when a fix will be released or at least said that no fix is coming?

MatthewSH commented 3 years ago

Another issue for Quasar was created (https://github.com/quasarframework/quasar/issues/10527) because of this issue. I did some initial work for tracking it down over there (see here: https://github.com/quasarframework/quasar/issues/10527#issuecomment-909270067 ). Would be nice if the issue was at least acknowledged by the devs.

However, I am concerned that the project is currently sitting inactive on all branches while issues sit open.

IlCallo commented 2 years ago

The problem apparently is into vue-loader itself, see https://github.com/vuejs/vue-loader/pull/1897