vue-loader: Incorrect HMR behavior with webpack 5 and enabled source maps

Version

16.1.2

Reproduction link

Steps to reproduce

Clone GitHub repo.
Run yarn and yarn dev.
Browse localhost:8080, type some symbols to input field and/or press counter button to change component’s state.
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.

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 11
Comments: 18 (2 by maintainers)

Most upvoted comments

The bug is still reproducible in 17.0.0, even on fresh setup using the newest @vue/cli 5

yura3d on Mar 3, 2022

This nasty bug forces me to revert back to Vue 2 and Webpack 4.

If you have the opportunity to try ViteJS, you might never go back to Webpack.

meduzen-immoweb on Nov 10, 2022

any solution to this? I’m having the same issue. Hot reload only works with devTool=false.

using this combination:

"typescript": "^4.7.4",
"vue-loader": "^17.0.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"

felipecarrillo100 on Jul 26, 2022

This nasty bug forces me to revert back to Vue 2 and Webpack 4.

If you have the opportunity to try ViteJS, you might never go back to Webpack.

Vite has issues, too - it does not allow me to put breakpoints inside my .vue files. I have to add/remove debugger statements. HMR in Vite is not perfect, too - sometimes it just does not notice that I’ve changed something in my code and I have to reload the page.

tmcdos on Nov 10, 2022

@Imabigcookie, you don’t need to completely disable devtools, but you do need to set it to source-map and make sure the target is set to web.

bayssmekanique on Dec 1, 2021