HMR not working in class components

[mohamadkhani]

Hey, Good day
I detect a problem with HMR in components with class style. The HMR not working when we use the quasar components that auto imported in components with class style.
I spent a long time, to detect the problem. And I realized that the combination of Vue3 + Class Style Component + Using auto imported Quasar Component causes the problem.

[Evertvdw]

I have this issue as well, I managed to reproduce it pretty easely:

1. Create a new quasar starter project with Typescript + Class components
2. Start up the dev server
3. Go to ClassComponent.vue and change something in there, hit save and see that HMR works.
4. Go to MainLayout.vue and change the title for instance, hit save and see that HMR does not work.

I have confirmed the above to be the case on both SPA and SSR.

quasar: v2.0.1
@quasar/app: v3.0.1

[Evertvdw]

Here is a repo with the code created from the steps above: https://github.com/Evertvdw/quasar-v2-hmr-bug

[outofmemoryagain]

I looked at the issue and it is not really clear what is happening. I can see that it is triggering the HMR pass and our auto-loader webpack plugin is triggered, but it does not trigger the vue component rerender. It definitely appears to be related to our auto-import loader, but the loader is generating the exact same code for the initial load as it does for the HMR pass. I don't have time to dive into the details of it but it must be related to the internals of how vue is detecting what parts of the page should be rerended as part of the HMR reload. I will try to reach out to the Vue team and see if they have any guidance. I will post any updates here as I have them.

[FlxEd]

I would like to add my +1 to this issue.
I absolutely love quasar with Class-Based-Components and I would love to go back to the amazing HMR experience it had before Vue 3.
Thank you in advance for future updates  😊

[IlCallo]

Just spent some hours trying to debug this further.
Let apart confirming what already known, I couldn't discover much

I tried multiple things comparing a Class API and a Composition API project

• the HMR call is the same for both, it only differs in the generated sourcemap (which is correct AFAIK)
• Quasar components are correctly registered into the components, or that's what it seems and by the fact they actually render
• the code generated from the loader is exactly the same for both projects

At this point, the problem could be either in Vue (eg into vue-loader or vue-compiler), into the Class Component library or in webpack dev server directly

I asked advice to the Vue team on this, let's see if they have any suggestion on how to debug it further

[r3gisc]

I've tried this and it works for me (quasar 2.0.4):
in quasar.conf.js

devServer: {
    watchFiles: {
        paths: ['src/**/*', 'public/**/*']
   }
}

[hawkeye64]

vuejs/vue-loader#1795

[IlCallo]

@r3gisc thanks for sharing!
How did you get to that workaround? Any explaination on why a workaround works and why you tried it in the first place could help us understand what's the real problem and how we can fix it in a definitive way

[Evertvdw]

@r3gisc @IlCallo This is not a workaround/fix for the problem. What that does is trigger a full page reload on every file change, which is of course not HMR.

[IlCallo]

I see... I got in touch with Vue Team in relation to the vue-loader issue, but they are clueless
Class API maintainer didn't answer my messages, so we're stuck on this
I'll try to debug this further as time permits, but this seems a bug down to webpack level
Probably need to bring in webpack team too

[rstoenescu]

We are closing this as this is most likely not a Quasar issue. Either Webpack or vue-loader is misbehaving and there's nothing that we can do about it.

We'll try to comment here about their investigation. Feel free to also do this.