Typescript error runtime error: Cannot read property 'prototype' of undefined when extending

Question

So I\'m getting the above error in the console. It\'s caused by _super being undefined when it\'s passed to __extends (in the generated .js

Answer 1

Possible reasons this is happening:

1. Quadruple-check that BundleConfig is concatenating the files in the correct order. This is by far the most common cause of that error.
2. Verify you don't have any top-level export directives in Test.ts. This would cause the file to become an external module and Test1 would no longer be visible.

Failing that, you should post the emitted JavaScript to the question so we can diagnose what's causing the issue.

Answer 2

The order of the scripts on your HTML matters.

Say you have a TypeScript file A.ts that defines an abstract class and a file B.ts with a class that extends the abstract class in A.ts

export abstract class ShipmentsListScope implements IShipmentsListScope {

A.ts:

module app.example{
  "use strict";

  interface IMyInterface{
    // ..
  } 
  export abstract class MyAbstract implements IMyInterface{
    // ..
  }
}

B.ts

module app.example{
    "use strict";

  class MyChildClass extends MyAbstract {
    // ...
  }
}

then in your HTML you have to ensure that the order of the scripts is correct once the javascripts have been generated:

<script src="/app/example/A.js"></script> <!-- A.js BEFORE -->
<script src="/app/example/B.js"></script>

Answer 3

Just leaving here how I solved this issue for my case : I missed a reference at the top of the TS file and it was totally ok for the build, whereas I had the same error on runtime. Adding the reference that seemed to be optional solved my runtime issue.

Answer 4

Incurred in this error today. Not sure what was the OP scenario, but in my team's case we had:

1. TypeScript v1.8.10
2. Webpack-based development build with concatenation, source maps, no optimization/uglification
3. Angular 2 dependency injection
4. Both base and derived classes defined in same file (say, dependencies.ts)
5. Base class defined after derived class
6. No compile errors nor warnings
7. Console log showing Uncaught TypeError: Cannot read property 'prototype' of undefined
8. Call stack pointing at internal __extends function on the last line of another class, in another file (say client.ts), importing those as dependencies

In code:

// dependencies.ts

import { Injectable } from 'angular2/core';

@Injectable()
export class LocalStorageService extends BaseStorageService {
  constructor() {
    super(localStorage);
  }
}

class BaseStorageService {
  constructor(private storage: Storage) {}
  // ...
}

and:

// client.ts

import { Injectable } from 'angular2/core';
import { LocalStorageService } from './dependencies';

@Injectable()
export class AuthStorageService {

  constructor(private permanentStorage: LocalStorageService) { }
  // ...

} // <-- call stack pointed here with inner '__extends' function

Problem solved by defining base class before derived class. After a quick search & read, this seems related to known (and unresolved?) TypeScript issues, e.g. #21 and #1842.

HTH

Answer 5

I had the same problem and it was caused by export default statements. To fix it I simply removed those and imported the required items another way:

BEFORE

A.ts

export default MyClass;

class MyClass { ... }

B.ts

import MyClass from "./A";

class MyClass2 extends MyClass { ... }

AFTER

A.ts

export class MyClass { ... }

B.ts

import { MyClass } from "./A";

class MyClass2 extends MyClass { ... }