Webpack Hot Module Replacement (HMR) doesn't update sourcemap

[evisong]

Hi, Webpack team,

I've got HMR working well with babel-loader, react-hot-loader, webpack-dev-middleware and webpack-hot-middleware. As expected, the React component updates in browser after an incremental build. However, the sourcemap for JSX files (or other ES6 file) is not reflecting to the source code change, instead it stays unchanged. I've tried devtool: eval-cheap-module-source-map and devtool: cheap-module-inline-source-map, neither one helps. I'm using Webpack v1.13.0.

Googling shows there are other one having the same issue: http://stackoverflow.com/questions/34723571/webpack-hot-module-replacement-hmr-sourcemaps-not-updated-new-code-not-visib

Sure I can correct it with a manual reload, but it would be great if it can update along with HMR.

Thanks for any comments.

[sokra]

As far as I know it's a browser bug.

[evisong]

Yes, I agree.

I just found a comment mentioning the same issue (http://survivejs.com/webpack_react/developing_with_webpack/#comment-2534457458):

I tried different sourcemap types and checked it in Chrome and Firefox with no success. But I think it's a browser level bug. I tried to disable and re-enable JS sourcemaps in Chrome dev-tool settings and it did helped, sourcemaps had updated, so config is fine.
I just checked the latest Chromium build but unfortunately the problem is still there. So I think the solution for now is either disable sourcemaps or HMR.

Webpack centered dev & build process is important to our web app development, while the sourcemap is an important tool for JS debugging. Could you keep this issue open for a while, so that I could revisit after more research? Thanks.

I'm now searching for possible bugs in chromium, hope to find some clues there.

[evisong]

Just submitted a comment to a Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=438251#c21

[markfinger]

My experience has been that browser's cache the source map based on the filename that the source map indicates. In the context of another build tool, I worked around this problem by ensuring that the source map always references a hashed version of the filename, eg: foo.js becomes foo-<some_hash>.js.

One downside to this approach is that the devtools never cleans up the old source maps until you refresh the page. Besides any concerns about perf or garbage collection, it does make navigating the sources tab a bit fiddlier as there's more noise with every past version of the files available.

Jumping to the source definition from rulesets, errors & logs still function as expected though, which is the primary use-case after all.

[evisong]

@markfinger You're right, there'll be noises when every past versions of sourcemaps co-exist.

According to Chromium team (https://bugs.chromium.org/p/chromium/issues/detail?id=438251#c22), a quick workaround is to manually press "alt-r which reloads the DevTools".

[evisong]

Per my test, Alt-R in DevTool solution doesn't work with 'cheap-module-eval-source-map', but works with 'cheap-module-source-map'.

[evisong]

Alt-R in DevTool solution works again in Version 53.0.2762.0 canary (64-bit). Not sure what's happening.

[bebraw]

Closing as this has been acknowledged by the Chrome team. alt-r it is then for now.

[weihong1028]

I found a way that set devtool: 'eval', and it will reload the source-map automatically, but the source-map code is generated code. I think this way is better for me.

[Knaackee]

Still have this issue (source maps not updating with hot module replacement) with webpack 2.3.3 has anyone a working example ?

[IAMtheIAM]

Any solution yet besides Alt + R?

[DespertaWeb]

Did anyone find a solution ??? for me it's working on FF but not in Chrome  ¬¬

[Ogglas]

Got it working by setting devtool: "cheap-module-eval-source-map", in webpack.config.js:.

You can always try with the command webpack-dev-server -d --hot --inline as well.

https://stackoverflow.com/a/50430244/3850405