Vue HMR reloads too "much"

[bobvandevijver]

I'm having a problem with the Vue HMR functionality in combination with Webpack Encore, although I'm not sure where this issue exactly comes from: it might come from anywhere (Encore, Typescript, SFC), but at least it is not behaving as it would compared with bare Vue development, and I hope there is somebody here who can help me with it.

What do I expect
When HMR is used, changes to templates and styles should not reload the script part of the Vue SFC, resulting in the state of the page being kept. The GIF below demonstrates what I expect:

What happens?

The script part is also reloaded, resulting in the counter being reset.

Steps to reproduce
I've made a minimal reproducible example for this problem: https://github.com/bobvandevijver/encore-vue-hmr-test.

1. Clone the project (https://github.com/bobvandevijver/encore-vue-hmr-test)
2. Install vendors composer install && yarn install
3. Run webpack dev server: yarn encore dev-server --hot
4. Change something in the template or style of Test.vue, and see the script part being reloaded as well as the counter resets

[HMR] Updated modules:
[HMR]  - ./assets/js/Test.vue?vue&type=script&lang=ts&
[HMR]  - ./assets/js/Test.vue?vue&type=script&lang=ts&
[HMR]  - ./assets/js/Test.vue
[HMR]  - ./assets/js/TestContainer.vue?vue&type=script&lang=ts&
[HMR]  - ./assets/js/TestContainer.vue?vue&type=script&lang=ts&
[HMR]  - ./assets/js/TestContainer.vue
[HMR]  - ./assets/js/Test.vue?vue&type=style&index=0&lang=css&
[HMR]  - ./assets/js/Test.vue?vue&type=template&id=4548563a&
[HMR]  - ./assets/js/Test.vue?vue&type=template&id=4548563a&
[HMR] App is up to date.

Notes
Note that I already needed to create a container component to prevent the whole page from being reloaded when the SFC is changed, and you also that component being refreshed by HMR, even though it was not touched.

Does anyone have any idea?

[bobvandevijver]

So, more than half a year later I discovered that this issue is still open, but I'm happy to share that I solved it by moving from the ts-loader to the babel-loader! 😃 I did need a newer version of the webpack-encore package as the old one doesn't support the required enableBabelTypeScriptPreset configuration method, but that shouldn't be a problem for anybody I guess.

I made my changes available in the demo repository for everybody who is interested, on the babel branch. More specifically, it's this commit: bobvandevijver/encore-vue-hmr-test@f3becf4.

The keen eye will notice that the container component also isn't required anymore, and in my experience this build method is also more than twice as fast compared with the previous method.

[bobvandevijver]

This resurfaced with Webpack 5, which seems to be related to vue-loader and having source maps enabled (see vuejs/vue-loader#1795).

The current workaround is to disable source maps.