typescript: import default export from module

Question

I have the following definition type file:

// index.d.ts
declare module 'Transformer' {
  class EditableElement {
      constructor(target: SVGPoint);
  }
  export = EditableElement;
}

And I want to import EditableElement. But when I write the following line:

import {EditableElement} from 'Transformer';

I get the next error:

Module "Transformer" resolves to a non-module entity and cannot be imported using this construct.

How could I import the EditableElement class? Actually, I just want to make use of that class. I don't want the import directive to have a collateral effect in my code. I just want use it :'(

Look at this question stackoverflow.com/questions/13407036/… — dagatsoin
– dagatsoin, Commented Apr 25, 2017 at 20:33

KARASZI István · Accepted Answer · 2020-10-21 13:20:51Z

38

This falls into ES6 / CommonJS interop.

My recommendation is to not relying on interop and use the old syntax instead:

const EditableElement = require('Transformer')

If you NEED to target es6/es2015, then you can do:

import * as EditableElement from 'Transformer'

// with `allowSyntheticDefaultImports`
import EditableElement from 'Transformer'

UPDATE: with [email protected] released, you can now do import EditableElement from 'Transformer' directly.

Turn on esModuleInterop in your tsconfig.json

edited Oct 21, 2020 at 13:20

KARASZI István

31.5k9 gold badges106 silver badges133 bronze badges

answered Apr 25, 2017 at 23:04

unional

15.8k6 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I.G. Pascual Over a year ago

esModuleInterop saved my day

Bogdan Surai · Accepted Answer · 2017-04-26 07:41:15Z

1

declare module is deprecated to use in your own typescript modules.You have to use either export or export default.

export class EditableElement {
      constructor(target: SVGPoint);
  }

For import you can use either import {EditableElement} from 'Transformer'; or import * as EditableElement from 'Transformer';

edited Apr 26, 2017 at 7:41

answered Apr 26, 2017 at 7:35

Bogdan Surai

1,29515 silver badges19 bronze badges

2 Comments

Cequiel Over a year ago

Thanks. This is automatically added by the "typings" command line: typings install file:/path/to/my/package/Transformer.d.ts

Bogdan Surai Over a year ago

Oh. I missed that it was d.ts. Maybe i was wrong. I prefer to use .ts and .tsx for declaring classes.

Bogdan Surai · Accepted Answer · 2017-04-26 20:01:49Z

1

Do you have reference path like that?

 /// <reference path="*/**/myModules.d.ts" />
 import * as m from "SomeModule";

answered Apr 26, 2017 at 20:01

Bogdan Surai

1,29515 silver badges19 bronze badges

Comments

Dean Martin · Accepted Answer · 2019-10-04 08:59:37Z

0

I like to think of this in the following way.

Scenario 1 - Export / import explicit things (Not a default export. This results in the need for wrapping your import name with '{}').

// Export (fileX)
export const something = 'hello world';

// Import (fileY)
import { something } from 'fileX';

Scenario 2 - Export / import a default (This results in no need for wrapping your import name with '{}'). The name that you choose, 'something' below, would be the alias for accessing your import.

// Export (fileX)
export default 'hello world';

// Import (fileY)
import something from 'fileY';

answered Oct 4, 2019 at 8:59

Dean Martin

1,3133 gold badges19 silver badges28 bronze badges

1 Comment

Cameron Hudson Over a year ago

In scenario 1, the entity that I'm exporting and importing is a class. When I try to use the imported class, I get _MyExportFile.default is not a constructor.

Collectives™ on Stack Overflow

typescript: import default export from module

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related