Getting this as undefined when using arrow function

Question

I'm using arrow functions and I'm debugging with Chrome and Firefox Dev Tool. I am getting, this as undefined, even though the code still works.

My assumption is, that it has something to do with source-maps.

Here are the tools I use in order to build the my code:

• webpack (devtool: eval)
• babel-loader (es5 preset)
• typescript-loader

Answer 1

The problem is that the chrome debugger believes that the this in the source code refers to the rune-time this, but this inside a arrow function in typescript source code is actually transformed to _this, so it's showing you the wrong object.

This is why it's only a problem in the debugger and the code still works fine. When I need to debug something where this is a problem, I just copy it to the console and prepend it with an underscore.