Error: *.default is not a constructor

Question

I get the following error, when testing some javascript code, transpiled from a typescript file.

Here is the error:

Error: _mapAction2.default is not a constructor

Here is the line of code that caused the error:

var mapAction = new MapAction(MapActionType.POLYGONDRAGGED, []);

Here is the original typescript-file map-action.ts:

import { IMapAction} from './imap-action';
import { MapActionType } from './map-action-type.enum';
import {LatLngLiteral} from 'angular2-google-maps/core';

export class MapAction implements IMapAction{
    type: MapActionType;
    paths: Array<LatLngLiteral>;

    constructor(mapActionType: MapActionType, paths: Array<LatLngLiteral>){
        this.type = mapActionType;
        this.paths = paths;
    }

    public getType(): MapActionType{
        return this.type;
    }

    public getPaths(): Array<LatLngLiteral>
    {
        return this.paths;
    }

}

Here is the transpiled .js-file map-action.js:

"use strict";
class MapAction {
    constructor(mapActionType, paths) {
        this.type = mapActionType;
        this.paths = paths;
    }
    getType() {
        return this.type;
    }
    getPaths() {
        return this.paths;
    }
}
exports.MapAction = MapAction;
//# sourceMappingURL=map-action.js.map

Godoy

Answer 1

You need to export a default value which will look like:

export default class MapAction implements IMapAction {...

And import it as:

import MapAction from './map_action_file';

Alternatively, if you want to export multiple things from the module you can do something like:

export class MapAction ...
export class MapSomethng ...

And import it as follows:

import { MapAction, MapSomething } from './map_action_file';

Trichomoniasis

or alternatively, import {MapAction} from './map_action_file' without exporting default – Tenterhook

Thank you yev, i merged all map_action-related files into one, and then @Ksygo's comment fixed the error! – Godoy

The lack of {} was getting me so: import { Frak } from './Frak'; fixed it. thx. – Fabriane

Answer 2

Another solution would be to add "esModuleInterop": true, into tsconfig.json.

esModuleInterop allows default imports from modules with no default export.

Horrific

For me it was the case when using twitter-lite SDK library so other users may find it helpful – Duodenum

I have it already true but the issue is still there. Any idea? – Steinway

This helped me - I was dealing with a really obtuse old JS library that was being impossible to augment with my own types. Thanks! – Flu

Answer 3

Check that your import is correct. you might miss {} for example. Change

import LatLngLiteral from '';

to

import { LatLngLiteral } from '';

Achene

There is a big difference between importing with brackets and without. If you don't know that difference, you need to spend 5 minutes to understand Default Exports vs Named Exports in JS – Kingwood

Of course I know the difference, but this error mostly comes when trying to import a Named Export that already exists in a file. It's way more common to change the import than the export that probably already exists in codebase. – Achene

Answer 4

If you had tried the answers here and they didn't help then verify the stack trace of your error carefully - I found the circular dependency in my code (but the error was the same as in this question so the cause was absolutely not evident)

Heredes

Same here. I had a circular import and I was seeing the same error. – Frizzle

Answer 5

I faced this issue when I was using node JS and mongoDB. the issue was on the way I imported the User model.

This is the way worked for me

import { User } from '../models/User'

Whispering

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Underfoot

Answer 6

I faced this problem recently. My imports were correct. I had to compile my TypeScript service because the js-class of my ts-class had differentiated code.

I did this in IntelliJ

Synchronize

Answer 7

Since classes in javascript are syntactic sugar, I figured I'd try to solve this issue without them. For me, switching the architecture over to prototypes seems to have solved my issue. Posting in case anyone else runs into this issue but is already doing export default

Amandie

This doesn't actually give more than the barest hint how to solve the actual question. I think you're suggesting that he should rewrite the imported module to not use classes (but I could be far wrong...). While perhaps the OP could do that, most people coming here with the same question are going to be dealing with third party modules that they can't modify. – Bellinger