Illegal constructor with EcmaScript 6

First of all I would like that say that I don’t really know how I can explain what I did on order to get the error mentioned in the title (uncaught TypeError: Illegal constructor). I am using gulpfile in order to compile my Ecmascript 6 to plain Javascript. My gulpfile looks like this:

var gulp = require('gulp');
var concat = require('gulp-concat');
var babel = require('gulp-babel');

gulp.task('compile', function () {
    return gulp.src(['resources/assets/js/*.js', 'resources/assets/js/components/*.js'])
        .pipe(babel({
                presets: ['es2015']
        }).on('error', logError))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('watch', function () {
   gulp.watch('resources/assets/js/**/*', ['compile']);
})

gulp.task('default', ['watch']);

function logError(err) {
    console.log(err);
}

I have a filesystem where all files are concatenated to one file (bundle.js), after being compiled with Babel.

In the browsers console (either Chrome or Firefox), the error appears and it is located in the next line:

var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, element));

The error within the console

This is the non-compiled code of this:

class Dropdown extends Node {

    constructor(element) {
        super(element);

        this.registerEvents(['click', 'change', 'blur']);
    }

    onClick() {
        this.$element.addClass('clicked');
    }
}

And this is the compiled code of the same class:

var Dropdown = function (_Node) {
    _inherits(Dropdown, _Node);

    function Dropdown(element) {
        _classCallCheck(this, Dropdown);

        var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, element));

        _this.registerEvents(['click', 'change', 'blur']);

        return _this;
    }

    _createClass(Dropdown, [{
        key: 'onClick',
        value: function onClick() {
            this.$element.addClass('clicked');
        }
    }]);

    return Dropdown;
}(Node);

I am not using export default Dropdown because I am not importing modules in other modules (this is not needed because every file is converted to one file, where everything is accessible).

I did some research and the only reason why peoeple got this error was because there was a capital letter where none was allowed. I didn’t find anything else about the cause of this error. Does someone have an idea why I get this error? And does someone have a solution?

Answer

It looks like you’re trying to extend DOM’s Node. You can’t do that, it’s defined as an abstract interface, and the host-provided function exposed in browsers for it can’t be called as a constructor (even by subclasses).

Leave a Reply

Your email address will not be published. Required fields are marked *