Can't seem to get Element.setAttribute to work with webpack/babel

Question

I have the following:

Element.prototype.makeDraggable = (elem = null) => {
    //this.draggable = true;
    this.setAttribute("draggable", "true");
    this.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};

When the browser gets to that function it throws an error on the first line:

Drag.js:7 Uncaught TypeError: n.setAttribute is not a function

Where n is the minified name of the element, or so I thought.

as you can see in the picture, this seems to be an Element, but n is.. well I don't know what it is. Am I doing it wrong?

At this same point, if I do this.draggable = true in the console it works just fine... You can also see that I tried doing it in the code but that doesn't work either.

Any ideas?

Answer 1

The this you see in the debugger is the actual this value; the this you see in the source view is the source-mapped version of n, and the value of n isn’t what you want it to be.

You used an arrow function, so you got lexical this. That’s what arrow functions do. To access the this from call time (what’s generally intended when adding methods to a prototype), use a non-arrow function:

Element.prototype.makeDraggable = function (elem = null) {
    //this.draggable = true;
    this.setAttribute("draggable", "true");
    this.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};

See also Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?.

Finally, extending the prototypes you have some of the least control over – browser built-ins – is considered a bad idea. (You could produce a conflict with future extensions to the spec, for example – or with other libraries you use.) A standalone function usually works better:

const makeDraggable = (target, elem = null) {
    target.draggable = true;
    target.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};