Hot reloading doesn't update Chrome sourcemaps

[gaearon]

We have not merged hot reloading support yet but I noticed a very unfortunate issue: Chrome doesn't update sourcemaps.

See how the Hello in browser Sources pane doesn't change.

Note that if we change Webpack devtool setting from cheap-module-source-map to eval it will update on hot reloads:

It used to be broken too but at some point Chrome fixed it. I remember chatting with @paulirish about it in the past.

However we can't switch to eval mode because we need the source mapping.

We should reach out to somebody at Chrome and figure out if this is fixable. We can live with the broken behavior for a while but if it’s not possible to fix later, then hot reloading experience would be confusing.

[gaearon]

This looks like a related bug: https://bugs.chromium.org/p/chromium/issues/detail?id=438251

[gaearon]

And this is a similar bug that was fixed for eval case by @pavelfeldman and (if I’m not mistaken) @ak239:

https://bugs.chromium.org/p/chromium/issues/detail?id=492902

[gaearon]

Related webpack discussion (closed in favor of Chromium bugs): webpack/webpack#2478

[gaearon]

I provided a detailed standalone repro case here: https://bugs.chromium.org/p/chromium/issues/detail?id=438251#c28

[onetom]

For the record, I'm suffering from the same issue in a completely different environment too for 2 years by now:

• [org.clojure/clojurescript "1.9.562"]
• [tailrecursion/boot-static "0.0.1-SNAPSHOT"]
• [hoplon/ui "0.2.1-SNAPSHOT"]

The phenomena is present in both Chrome 61, Firefox 53, Safari 10 and Opera 45.

The alt-r workaround recommended in the Chromium discussion doesn't work (again?) in Chrome Canary 61.0.3124.0 either.

Maybe worth mentioning the related issue here too:
gaearon/react-hot-loader#180

Closing and re-opening the dev tools in Firefox will load the latest source code, but since it doesn't preserve the state of its windows, we have to re-open the desired source files again.

Using the :source-map-timestamp option mitigates the problem slightly by making the latest original source code available in the browser under a timestamped name (eg. application.cljs?rel=1496943424545), but it doesn't remove earlier versions, so it's still a bit confusing...

At least clicking on error references in the console brings us to the correct version of the original source code.

[niieani]

This commit webpack/webpack@84b6554 has now landed in Webpack, which enables setting a contentHash as a query-string suffix. This workaround should be sufficient to solve this problem.

[gaearon]

Could you help me understand how it solves the problem? What's the developer experience like? Do we need to update our config?

[niieani]

@gaearon yeah, just change the Webpack config to include:

{
  // ...
  output: {
    // ...
    sourceMapFilename: "[file].map?[contenthash]"
  }
}

This will use the workaround which makes the sourcemaps work in Chrome together with cheap-module-source-map.

[gaearon]

It still won't replace sourcemaps on edit, right? Will just add new copies of the file.

[niieani]

I believe the mapping should update too, since the code-paths will be different.

[gaearon]

@niieani I can't reproduce that it fixes the issue. If I use module.hot.accept calls, I still see old code on hot reload. Can you provide full instructions for me to see how this fixes it?

[niieani]

Hmm, the old code will still be visible (since we cannot unload sourcemaps), however new code should appear and be mappable, correctly.