36

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).

Here's some test code that can be used to reproduce the error:

//This is the entirety of the file Test.ts
module Test {
    export class Test1 {
        public Name: string;
        public Number: number;

        constructor() {

        }
    }
}

Then in a separate file I have a class that inherits from that one:

/// <reference path="Test.ts" />
module Test {
    export class Test2 extends Test1 {
        constructor() {
            super();
        }
    }
}

The <reference path... shouldn't be needed (and isn't), but I added it to see if it helped (it didn't).

The files are included in the correct order (Test.ts then Test2.ts) via BundleConfig (running with or without optimisations doesn't have any effect).

I am probably being a giant noob, but I haven't the slightest clue what I've messed up. All the other instances of this problem I've found online are from folks using the command line compiler to combine multiple Typescript files into one single file. I'm using the bundler to do that, but even when I don't combine them, I get the exact same issue.

Please help me, I'm at my wits end!

As requested, here's the compiled javascript: Test.js:

//This is the entirety of the file Test.ts
var Test;
(function (Test) {
    var Test1 = (function () {
        function Test1() {
        }
        return Test1;
    })();
    Test.Test1 = Test1;
})(Test || (Test = {}));
//# sourceMappingURL=Test.js.map

Test2.js:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
/// <reference path="Test.ts" />
var Test;
(function (Test) {
    var Test2 = (function (_super) {
        __extends(Test2, _super);
        function Test2() {
            _super.call(this);
        }
        return Test2;
    })(Test.Test1);
    Test.Test2 = Test2;
})(Test || (Test = {}));
//# sourceMappingURL=Test2.js.map
1
  • 1
    I restarted my PC over lunch and this now works. How very odd.
    – Maverick
    Commented Jun 26, 2014 at 4:26

5 Answers 5

26

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.

7
  • BundleConfig only concatenates the files in release mode, but the code is in the correct order either way (I even tried manually include the compiled .js files to be 100% sure). I posted the entirety of my .ts files above (I had the error with much more complex code, so I created a new page using only the above typescript). I'll do the same with the .js files.
    – Maverick
    Commented Jun 26, 2014 at 1:44
  • What order are the script tags on the HTML page? Have you set breakpoints in the webpage to see when things get assigned? Commented Jun 26, 2014 at 1:57
  • HTML from the page: <script type="text/javascript" src="/js/@jsFolder/Home/Test.js"></script> <script type="text/javascript" src="/js/@jsFolder/Home/Test2.js"></script> I haven't set breakpoints in the webpage. I'll try that after lunch (which it is now time for).
    – Maverick
    Commented Jun 26, 2014 at 2:00
  • 2
    This has pointed me in the right direction to fix the same issue.
    – Flinkman
    Commented Jun 30, 2015 at 13:11
  • This helped me as well. For those who come to this and have all their classes in a single file using multiple levels of inheritance, make sure that you have them in the hierarchical order within the file. For Instance, if you had abstract class Human -> abstract class Homo extends Human -> class Sapien extends Homo then the class definitions would need to be in the same order within the file: Human, Homo, then Sapien. Commented Mar 23, 2016 at 18:16
18

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

4
  • 1
    As it says above, the issue I encountered was some sort of weird issue that was resolved by restarting my PC. The code in my question is what I used to produce the error - but there is no way that code and setup should produce the error :).
    – Maverick
    Commented May 5, 2016 at 0:39
  • Yep, I read that, that's why I'm not sure it was the same scenario. But the error was the same, and others experienced that error due to the order classes are defined. It might be helpful for people coming here from a google search (like me)
    – superjos
    Commented May 5, 2016 at 10:42
  • Great description! For me, I had an UNUSED class that was defined before a base class. So the problem is actually more general than what you describe. Commented Nov 18, 2016 at 17:22
  • I had a similar problem in an ionic2 project using Typescript. A common way to do imports is to gather them in a single ts file full of exports. That was the cause of our problem as that contained exports for both the base class and the subclasses, which somehow messed up the order of imports. Solution was to pull the base class out of that (we also moved it into another folder) and explicitly import the base class from that file. We also had a generically typed class that used this base class as its type parameter so the error for us showed up in the class that used this generic class.
    – Johncl
    Commented Dec 9, 2016 at 7:09
3

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>
2

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

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.

1
  • @Samuel A /// <reference /> to a ts file I created in my project
    – bviale
    Commented Nov 10, 2016 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.