TypeError: jim.FizzBuzzManager is not a constructor

This is a common error when you use --out : https://basarat.gitbook.io/typescript/main-1/outfile

You are responsible for loading the files in the right order. Don't use out and use external modules 🌹

When migrating from plain ES6 / Node.js using module.exports/require() it often happens to me that I forget to remove the old module.exports = <class> which also causes this error.

I came upon this question after googling "typescript is not a constructor". Unfortunately, these answers did not resolve my problem. I eventually found the solution, so I am posting it here for posterity.

Problem

I defined the following TypeScript class:

module mymodule {
    export class myclass {
        addDocuments(parentId: string) {
        // Code removed for brevity...
        }
    }
}

I then called the class in a separate module:

module mymodule.test {

    var myClass = new mymodule.myclass();

    export function initialize(): void {
        myClass.addDocuments("test123");
    }
}

After compiling and while attempting to load the page that executes the resulting Javascript, the page wouldn't load properly and I saw the following JS exception:

Uncaught TypeError: mymodule.myclass is not a constructor

Solution

A fellow developer was kind enough to point out that I needed to move the instantiation of the object inside of my function. So now my instantiation code looks like this and it works as it should:

module mymodule.test {

    var myClass: mymodule.myclass;

    export function initialize(): void {
        myClass = new mymodule.myclass();
        myClass.addDocuments("test123");
    }
}

In my case it was just circular dependencies. Take a look at that because this one is hard to catch

I had this error my_imported_module_1.MyModule is not a constructor.

I was using the approach when I got this error: import { MyModule } from 'my-module-sdk';

but I got it to work when I changed it to this approach: const MyModule = require('my-module-sdk');

In my tsconfig.json, I have "target" set to "es5", and tried changing it "es6" and that still didn't help.

Here are some of my other tsconfig options:

"target": "es5",
"module": "esnext",
"declaration": true,
"rootDir": "./src",
"moduleResolution": "node",
"lib": ["es6", "dom", "es2016", "es2017", "es2018", "es2019", 
"es2020"],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"allowJs": false

It might be helpful to think about it as if you were writing the code in JavaScript directly. I came across this question because I got the same error in an Angular 2 test spec written in TypeScript. After thinking about it based on the answers above, I realized that JavaScript would have no idea what my equivalent to your BuzzFeed class was because it was at the bottom of the file.

I moved the class up to the top of the file before my first describe statement and everything works. Thought this might help others like myself.

Make sure that class definition is declared before its usage. That was the solution for my problem.

Correct:

class Foo {...}
...
const foo = new Foo();

Incorrect:

const foo = new Foo();
...
class Foo {...}

I think you're doing:

export class Something

Change it to this and it will work

export default class Something

Which typescript version do you use?

There is a Bug in tsc 1.8.10:

https://github.com/Microsoft/TypeScript/issues/8910

This error message means that [Class] is not initialized by the time a call to its constructor is made.

Unlike functions, classes are not “hoisted” to the top of the scope they are declared in. Whenever code uses a class that is declared later (i.e. down below in the file), this error appears.

Solution: reorganize your code so that call sites for a class appear below that class' definition in the source code.

I tried to repeat your problem and I did not find any error:

app.ts

namespace jim {
    class Greeter {
        element: HTMLElement;
        span: HTMLElement;
        timerToken: number;

        constructor() {
            window.console.log("constructing Greeter.");
            this.init();
        }

        private init() {
            window.console.log("Calling init.");
            var _fizzBuzzManager: any = new jim.FizzBuzzManager();
        }

    }

    window.onload = () => {
        window.console.log("Hello")
        var greeter = new Greeter();

    };
}

FizzBuzzManager.ts

namespace jim {

export class FizzBuzzManager {

    constructor() {
        window.console.log("Making a FizzBuzzManager.");
    }

    public myThing: String = "Hi";

    public fizzBuzz2() {
        window.console.log("fizzbuzzing2 " + this.myThing);
    }

}

export function fizzBuzz() {
    window.console.log("export function fizzbuzz");
}

}

Then

c:\Work\TypeScript-playground>node_modules\.bin\tsc --out app.js app.ts FizzBuzzManager.ts

and compiled app.js file looks like this:

var jim;
(function (jim) {
    var Greeter = (function () {
        function Greeter() {
            window.console.log("constructing Greeter.");
            this.init();
        }
        Greeter.prototype.init = function () {
            window.console.log("Calling init.");
            var _fizzBuzzManager = new jim.FizzBuzzManager();
        };
        return Greeter;
    })();
    window.onload = function () {
        window.console.log("Hello");
        var greeter = new Greeter();
    };
})(jim || (jim = {}));
var jim;
(function (jim) {
    var FizzBuzzManager = (function () {
        function FizzBuzzManager() {
            this.myThing = "Hi";
            window.console.log("Making a FizzBuzzManager.");
        }
        FizzBuzzManager.prototype.fizzBuzz2 = function () {
            window.console.log("fizzbuzzing2 " + this.myThing);
        };
        return FizzBuzzManager;
    })();
    jim.FizzBuzzManager = FizzBuzzManager;
    function fizzBuzz() {
        window.console.log("export function fizzbuzz");
    }
    jim.fizzBuzz = fizzBuzz;
})(jim || (jim = {}));

Chrome browser reports in its console:

app.js:15 Hello
app.js:5 constructing Greeter.
app.js:9 Calling init.
app.js:24 Making a FizzBuzzManager.

There is a good explanation of the error you are getting here: Javascript: TypeError: ... is not a constructor (not that it reveals the origin of the problem but you may see the problem in your transpiled code.)

For future readers, the problem could also be if the constructor expects parameters and you are giving no parameters or a different number of parameters. This is because for Javascript a function with a different number of parameters is a different function.

A simple solution could be to add default parameters in the constructor.

My example was like this:

SegmentsQueryBuilder.ts

class SegmentsQueryBuilder {
  //...
  constructor(scoping) {
    //...
  }
//...
}

segments.query.builder.test.ts

describe('Segment base query', () => {
  test('should create segment select with default fields', () => {
    const segmentQueryBuilder = new SegmentQueryBuilder() //ERROR HERE
//...

The solution here was either to use default parameter in the constructor or to pass the scoping object in the usage of the constructor

Using export = Something instead of export class Something solved it for me.

In my case I had the problem when I used babel with preset-env to compile TS-sources.

Works:

{
    "presets": ["@babel/typescript"],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ],
    "ignore": ["node_modules", "src/test"]
}

Wrong:

{
    "presets": [
        "@babel/typescript",
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "last 2 Chrome versions",
                        "last 1 Safari versions",
                        "last 1 Firefox versions"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ],
    "env": {
        "node": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": {
                            "esmodules": true,
                            "node": "current"
                        },
                        "modules": "auto"
                    }
                ]
            ]
        }
    },

    "ignore": ["node_modules", "src/test"]
}

at first, make sure that use

/// <reference path = "FizzBuzzManager.ts" />   

to refrence code to another .ts file at typescript root file

to compile typescript files that exist in different file.ts use this command

tsc --out app.js app.ts

because this command converts all typescript files into app.js

TL;DR

Clear the output directory

Explanation

In my case, this problem occurred after I had moved src/email.ts to src/email/index.ts. TSC didn't remove lib/email.ts, causing the class I had defined in the new location not to be available.

I had same issue, apart from export default class Something I created a separate file called something.ts then another file index.ts in the someting.ts file I had

export default class Something {}

then in index.ts I wrote

import { Something } from './something';
export = Something;

after that I could import as (For Typescript)

import Something from './';

and as (For Javascript)

const Something = require('./');

With JetBrains WebStorm, it's possible to get this error in your tests even if you have fixed a problem with imports in the code itself.

e.g. the following fix:

// import { Foo } from '@foo/bar';

import Foo = require('@foo/bar);

solved the issue, but it was necessary to run npm run compile or npm run test afterwards.

Then running the tests in WebStorm worked as expected.