TypeError in Typescript

Question

Here my problem: I get this error:

Uncaught TypeError: Object prototype may only be an Object or null: undefined

export          


        

Answer 1

To add to this, the actual problem here with the circular dependency is because one of resources that have not loaded before they are used. You will also get this error if your resources are loading out of order.

Consider this example that uses gulp to compile:

// File Parent.ts
export class Parent {
    public prop: string = "prop";
}
//File Child.ts
export class Child extends Parent {
    public prop2: string = "prop2";
}

and the gulp to compile

gulp.task('compile-js', function () {
return gulp.src(['code/Child.js', 'code/Parent.js'])
    .pipe(sourcemaps.init())
    .pipe(concat('app.bundle.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/build'));
});

The output file app.bundle.js will error with "Uncaught TypeError: Object prototype may only be an Object or null: undefined" because the resulting code will first execute the creation of the Child class (which has the dependency on the Parent class) before the parent class has been loaded.

If you look at the resulting javascript you will get:

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Child = /** @class */ (function (_super) {
    __extends(Child, _super);
    function Child() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.prop2 = "prop2";
        return _this;
    }
    return Child;
}(Parent));
var Parent = /** @class */ (function () {
    function Parent() {
        this.prop = "prop";
    }
    return Parent;
}());

And when you run this you will get:

Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf ()

To fix this, simply change the order of the resources in your gulp file or whatever method you are using to prepare or load the javascript for the page.

return gulp.src(['code/Parent.js', 'code/Child.js'])

There are many ways that this can be dealt with, this is just an example to help you understand the problem and how you might fix it. Whichever way you find to fix the problem, in the end, the error is asking the javascript engine to do something you haven't yet given instructions for at the time of execution.

Hope this helps, Cheers