Use better-suited devtool option for sourcemaps

I recently hit an issue where this value was showing up as undefined when debugging in browser’s dev tools, in cases like this:

const foo = {
  greeting: "hello",
  audiences: ["world", "mars", "wales"],

  bar() {
    return this.audiences.map(audience => {
      return `${this.greeting} ${audience}`; // `this` is `undefined` when inspecting
    });
  }
};

Note, this is only when debugging and inspecting the value (e.g. mouseover), the actual code is fine when running.

After some research I realised this was due to the choice to sourcemap generated by webpack. You currently have it set to "cheap-module-source-map", which the webpack docs say is "not ideal for development nor production".

The webpack docs recommend either "eval", "eval-source-map", "cheap-eval-source-map", or "cheap-module-eval-source-map"for dev. "eval-source-map" fixed the issue I described above.

Is it worth changing to a setting recommended by webpack, or is there some specific reason for using "cheap-module-source-map" that is not obvious to me?

[WickyNilliams]

Right now, breakpoints seem to be working fine for me in chrome with eval-source-map. I’ll report back at the end of the day after using it for a few hours.

Source maps support mapping of variable/symbol names. I assume only the more comprehensive sourcemap generation options do this, whereas the more lightweight options do not. See https://bugs.chromium.org/p/chromium/issues/detail?id=327092

In any case, the current choice is not recommended so it’s probably worth changing to one that is recommended, even if it is not eval-source-map

[jasonLaster]

We recently landed support for mapping scopes and variables in Firefox DevTools. The feature requires column-based mappings, which are needed for accurately mapping identifiers between original and generated code.

Webpack has a couple of source map options that work well (source-map, eval-source-map , inline-source-map). Basically it can’t be cheap (read line-based) and it has to include the original source docs.

Would you be open to switching from a cheap-module-source-map to one of the other options in development?

Before

After