CODEWITHSUNDEEP
javascripttypescript
Get Off My Lawn
Get Off My Lawn

Reputation: 36299

Cannot read property 'prototype' of undefined when extending classes

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
});

Upvotes: 9

Views: 34495

Answers (6)

Marijn Degen
Marijn Degen

Reputation: 31

The reason for me was not calling super() in one of the classes. You could check if super is called from each constructor.

Upvotes: 0

Naveen Yadav
Naveen Yadav

Reputation: 11

In My Case, I was using browserify.

  1. Browserify file path: browserify/bundle.js
  2. Client.js file path: public/js/client.js
  3. Import file path: app.js

So when i'm importing bundle.js, app.js file path is different then loading from client.js (as i'm making changes in client.js and then converting it in bundle.js)

Upvotes: 0

Glenn Bullock
Glenn Bullock

Reputation: 349

For me, strangely, I was trying to extend a component I'm importing via webpack from a node_modules package (angular-dual-listbox), and when I imported it using the "from 'angular-dual-listbox'", it failed with the above message. When I imported from 'angular-dual-listbox/index', viola!

Upvotes: 0

Cristina
Cristina

Reputation: 86

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.

Upvotes: 5

Get Off My Lawn
Get Off My Lawn

Reputation: 36299

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'

Upvotes: 2

Arg0n
Arg0n

Reputation: 8423

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 ... {
    ...
}

Upvotes: 9

Related Questions