Cannot read property 'prototype' of undefined when extending classes

Question

I am having an issue with extending items, where I am getting:

Uncaught TypeError: Cannot read property 'prototype' of undefined

From what I have read items need to be defined in a particular order, so here is what I am doing, as it seems like they are in the correct order.

This doesn't happen at compile time, but at runtime in the browser. I am compiling the files into one file with browserify and tsify.

Here is my entry point main.ts:

import GameSmartWeb from './GameSmartWeb';
window.gs = new GameSmartWeb();

It then calls this file GameSmartWeb.ts which references a GUI class:

import GUI from './apis/GUI';
export default class GameSmartWeb {
    public get gui(): GUI { return new GUI(); }
}

Then the GUI class apis/GUI.ts looks somewhat like this:

export default class GUI extends GameSmartWeb {
    public get rewards(): Rewards { return new Rewards(); }
}

class Rewards extends GUI {
    // More methods
}

When looking in the browser it says the error is here:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); // The error is on this line
};
var GUI = (function (_super) {
    __extends(GUI, _super); // This is the call to the function
    // more auto generated code
});

Answer 1

This happened to me today, though it does not seem to be the same cause as for you. I'm writing an answer anyway for other people coming here in the future.

I had my files set up like this:

item.ts:

export class Item {
    myAwesomeFunction() {
        ...
    }
}

index.ts (to be able to reference smoothly):

...
export * from './item';
...

other.item.ts:

import { ..., Item, ... } from './index';

export class OtherItem extends Item ... {
    ...
}

And this caused the error for me:

Cannot read property 'prototype' of undefined

After changing other.item.ts to the following, it worked:

import { ... } from './index';
import { Item } from './item';

export class OtherItem extends Item ... {
    ...
}

Answer 2

I had the same issue. In my case, the order of class files in the bundle config file was the reason of it. I had the file of the derived class specified before the one of the base class, switching the order, fixed it.

Answer 3

The issue was because in my compiler, the order of the files were wrong. When ordering the files in the correct order the error goes away and the JavaScript works.

So, the order in the compiler should look like this:

'GameSmartWeb',
'GUI'