Error when modules depend on each other

I have this situation:

File /com/a/A.ts

/// <reference path='../b/B.ts' />
module com.a {
    import B = com.b.B;

    export class A {
        constructor() {             
        }

        test() { 
            console.log("Test A");
            var b = new B();
        }

        test2() {
            console.log("Test A2");
        }    
    }
}

function executeApp() {
    var c = new com.a.A();
    c.test();
}

File /com/b/B.ts

/// <reference path='../a/A.ts' />
module com.b {
   import A = com.a.A;

    export class B {
        constructor() {
            console.log(A);
            var a = new A();
            a.test2();
        }

        test() {
            console.log("Test B");
        }
    }
}

OUTPUT IS:

var com;
(function (com) {
    var b;
    (function (b) {
        var A = com.a.A;
        var B = (function () {
            function B() {
                console.log(A);
                var a = new A();
                a.test2();
            }
            B.prototype.test = function () {
                console.log("Test B");
            };
            return B;
        })();
        b.B = B;
    })(b = com.b || (com.b = {}));
})(com || (com = {}));
var com;
(function (com) {
    var a;
    (function (a) {
        var B = com.b.B;
        var A = (function () {
            function A() {
            }
            A.prototype.test = function () {
                console.log("Test A");
                var b = new B();
            };
            A.prototype.test2 = function () {
                console.log("Test A2");
            };
            return A;
        })();
        a.A = A;
    })(a = com.a || (com.a = {}));
})(com || (com = {}));
function executeApp() {
    var c = new com.a.A();
    c.test();
}
//# sourceMappingURL=compiled.js.map

There is error “Uncaught TypeError: Cannot read property ‘B’ of undefined”

Possible simple solution is to render imports:

var B = com.b.B;

As function:

var B = function() {
         com.b.B;
}

And all new keywords:

var a = new A();

With:

var a = new (A())();

Than it works.

I test this in console of browser (or onload method):

executeApp();

With this solution its not necessary to do any ordering in output file and no need for references. Is this acceptable solution?

Final output would than be:

var com;
(function (com) {
    var b;
    (function (b) {
        var A = function() {return com.a.A};
        var B = (function () {
            function B() {
                console.log((A()));
                var a = new (A())();
                a.test2();
            }
            B.prototype.test = function () {
                console.log("Test B");
            };
            return B;
        })();
        b.B = B;
    })(b = com.b || (com.b = {}));
})(com || (com = {}));
var com;
(function (com) {
    var a;
    (function (a) {
        var B = function() {return com.b.B};
        var A = (function () {
            function A() {
            }
            A.prototype.test = function () {
                console.log("Test A");
                var b = new (B())();
            };
            A.prototype.test2 = function () {
                console.log("Test A2");
            };
            return A;
        })();
        a.A = A;
    })(a = com.a || (com.a = {}));
})(com || (com = {}));
function executeApp() {
    var c = new com.a.A();
    c.test();
}
//# sourceMappingURL=compiled.js.map

[davetapley]

This has tripped 34 people up on Stack Overflow: https://stackoverflow.com/a/59665223/21115

[Kinchkun]

Hi,

i want to add, that for us this is also problem. We have larger projects and compiling them into on js file, but then we have to manage the ordering for our modules (resp. namespaces).

I think collecting all namespaces during the compilation and put them as empty object into the beginning of the outputting js file, will solve this issue.

Minimal example of the error condition:

namespace A {
import b = B;
export function errorFn() {
    console.log(b.member);
}
}

namespace B {
export var member = 1;
}

A.errorFn() // Uncaught TypeError: Cannot read property 'member' of undefined

Because the import b=B will import an undefined and the later definition of B has no effect to this.

Creating empty B object in the beginning will solve this.

var B = {}
namespace A {
import b = B;
export function errorFn() {
    console.log(b.member);
}
}

namespace B {
export var member = 1;
}

A.errorFn() // Works like charm

Any comments to this?

Kind regards, Timo