Incorrect HMR behavior with webpack 5 and enabled source maps

[yura3d]

Version

3.0.5

Reproduction link

https://github.com/yura3d/vue3-webpack5

Steps to reproduce

1. Clone GitHub repo.
2. Run yarn and yarn dev.
3. Browse localhost:8080, type some symbols to input field and/or press counter button to change component's state.
4. Open src/App.vue and change something in <template> section.

What is expected?

HMR applies, input field and counter still contain their values as state shouldn't be changed according to docs: https://vue-loader.vuejs.org/guide/hot-reload.html#state-preservation-rules

What is actually happening?

HMR applies.

State is lost when bundling with webpack 5 if devtool is set to something with source maps (source-map, eval-source-map, etc).

State is preserved when devtool doesn't set source maps (false, eval), or when bundling with webpack 4 (even with source maps) and almost the same webpack.config.js.

---

I see this console output on HMR with webpack 5 and source maps:

log.js:24 [HMR] Updated modules:
log.js:16 [HMR]  - ./src/App.vue?vue&type=script&lang=js
log.js:24 [HMR]  - ./src/App.vue?vue&type=script&lang=js
log.js:24 [HMR]  - ./src/App.vue
log.js:16 [HMR]  - ./src/App.vue?vue&type=template&id=7ba5bd90&scoped=true
log.js:24 [HMR]  - ./src/App.vue?vue&type=template&id=7ba5bd90&scoped=true
log.js:16 [HMR]  - ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss&scoped=true
log.js:24 [HMR] App is up to date.
hotModuleReplacement.js:215 [HMR] Reload all css

And this on HMR without source maps:

log.js:24 [HMR] Updated modules:
log.js:16 [HMR]  - ./src/App.vue?vue&type=template&id=7ba5bd90&scoped=true
log.js:24 [HMR]  - ./src/App.vue?vue&type=template&id=7ba5bd90&scoped=true
log.js:16 [HMR]  - ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss&scoped=true
log.js:24 [HMR] App is up to date.
hotModuleReplacement.js:215 [HMR] Reload all css

It seems component's JS recompiles even when there are no changes in <script> section if source maps are enabled.

[yura3d]

The bug is also reproducible in apps created by Vue CLI 5.

[tbeckenhauer]

A quick google search shows Vue CLI is using webpack 5. I am wondering if any other frameworks are having this problem. If we can answer that question it will be clear if this is a webpack thing or a vue thing.

[Adrek]

I have the same problem.