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?