Cannot read the 'prototype' of undefined property when extending classes

Question

I have a problem with expanding elements where I get:

Uncaught TypeError: Cannot read the 'prototype' property from undefined

From what I read, the elements should be defined in a specific order, so here is what I am doing, as it seems that they are in the correct order.

This does not happen at compile time, but at runtime in the browser. I compile files into a single file with browserify and tsify .

Here is my main.ts entry point :

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

He then calls this GameSmartWeb.ts file, which references the GUI class:

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

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

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

When viewed in a 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, although this does not seem to be the same reason as for you. I am writing an answer anyway for other people coming here in the future.

I had my files configured as follows:

item.ts

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

index.ts (to be able to correctly link):

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

other.item.ts

 import { ..., Item, ... } from './index'; export class OtherItem extends Item ... { ... } 

And this caused an error for me:

Unable to read the 'prototype' property from undefined

After changing other.item.ts to the following:

 import { ... } from './index'; import { Item } from './item'; export class OtherItem extends Item ... { ... } 

Answer 2

I had the same problem. In my case, the reason was the class of class files in the package configuration file. I had a file of a derived class, indicated before one of the base class, which changed the order, fixed it.

Answer 3

The problem was that in my compiler the file order was wrong. When ordering files in the correct order, the error disappears and JavaScript works.

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

 'GameSmartWeb', 'GUI' 

Answer 4

Strange for me, I tried to expand the component that I import via webpack from the node_modules package (angular -dual-listbox), and when I imported it using "from" angular -dual-listbox '", it failed with the above message: When I imported from angular -dal-listbox / index ', viola!