Can't do a default import in Angular 9

Question

I changed tsconfig.json by adding this properties

"esModuleInterop": true, "allowSyntheticDefaultImports": true,

in order to be able to import a npm package import * as ms from "ms";

But I still get this error

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

What am I missing?

Update:

If I change with import ms from "ms", then it works fine with the compiler but not with VSCode linter and the error is

 can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)
index.d.ts(25, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

As I said now is working but VSCode have a problem.

Have you tried using the default export? Maybe [this can help](https://stackoverflow.com/questions/32236163/when-to-use-import-as-foo-versus-import-foo). — Lucas Sousa, Mar 30 '20 at 17:35
Thank you Lucas, it worked with the Angular Compiler, but VSCode still does not like it — Georgian Stan, Mar 30 '20 at 17:50
If you take out the tsconfig.json property `"allowSyntheticDefaultImports": true,`, can you import it using the * syntax? — Lucas Sousa, Mar 30 '20 at 17:59
Nope. And Is weird because If I setup typescript compiler I can make it work with this props — Georgian Stan, Mar 30 '20 at 19:20
I had to change `tsconfig.app.json` in order to make it work — mpccolorado, Mar 28 '22 at 12:22

score 79 · Answer 1 · answered Sep 29 '21 at 15:31

79

"allowSyntheticDefaultImports": true

This flag solved problem, but it should be added to compilerOptions section of tsconfig.json

answered Sep 29 '21 at 15:31

PokatilovArt

1,111
11
13

3

This solution worked for me on NestJS ! – Hugo Sohm Oct 07 '21 at 08:49
This worked for me in Angular 12; installing angular-d3-cloud and @types/d3-cloud – EdNdee Jan 28 '22 at 17:01

score 53 · Answer 2 · answered Dec 22 '20 at 03:31

53

You can just do something like this

import * as printJS from 'print-js'

answered Dec 22 '20 at 03:31

Ever Dev

1,882
2
14
34

score 25 · Answer 3 · edited Oct 19 '21 at 14:06

If you have this error trying to import localforage into angular 9, I used this (Angular 9.1.12, Typescript 3.9.6):

npm install localforage

// tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "esModuleInterop": true, <----------------------------add this
    "allowSyntheticDefaultImports": true <----------------------------and this
  },
}

// any component or service

import * as localforage from 'localforage';

constructor() {
    localforage.setItem('localforage', 'localforage value');
    setTimeout(() => {
      localforage.getItem('localforage').then((e) => {
       console.log(e);
      });
    }, 5000);
    setTimeout( async () => {
      const RES = await localforage.getItem('localforage');
      console.log('RES', RES);
    }, 10000);
  }

worked after moving under compilerOptions in the //tsconfig.ts like below "compilerOptions": { "allowSyntheticDefaultImports":true, "esModuleInterop": true} — Aymen Boumaiza, Sep 22 '21 at 12:50
be careful adding the `"esModuleInterop": true`, it can break things like `import * as moment from 'moment';` — BlackICE, Oct 19 '21 at 14:07

score 4 · Accepted Answer · edited Mar 30 '20 at 18:04

4

The problem is how the package declared the export, you can still import using the default import:

import ms from "ms";

edited Mar 30 '20 at 18:04

Nicholas K

15,148
7
31
57

answered Mar 30 '20 at 17:57

Lucas Sousa

401
5
18

And how can I get over the linting error from VSCode, other then using @ts-ignore? – Georgian Stan Mar 30 '20 at 17:59
You can try using the node import: `let ms = require("./ms");` For more info [check this out](https://github.com/microsoft/TypeScript/issues/7185#issuecomment-354566288) – Lucas Sousa Mar 30 '20 at 18:26

score 4 · Answer 5 · answered Jun 04 '22 at 00:19

4

it works perfectly importing all from the package module example :

import * as CryptoJS from 'crypto-js';

if this doesnt work make sure you are have successfully installed the package type

answered Jun 04 '22 at 00:19

Timileyin Oluwayomi

159
7

score 1 · Answer 6 · answered Nov 21 '22 at 04:35

1

I solved this by adding "allowSyntheticDefaultImports": true to tsconfig.json

And you must save the changes by running this command line in the terminal:

tsc --p tsconfig.json

answered Nov 21 '22 at 04:35

Ashrik Ahamed

138
7

adding it to `angularCompilerOptions` – massic80 Feb 23 '23 at 10:08

score 0 · Answer 7 · answered Jul 24 '21 at 21:50

Having the error message

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

on a typescript import rule for an Angular component :

import { something } from 'amodule';

in node_modules/@types/amodule/index.d.ts, I found this code :

declare module 'amodule' {
   export = something;
}

and changed it to :

declare module 'amodule' {
    export default something;
}

the import rule in the angular component was changed to :

 import something from 'amodule';

and the error message is gone and the imported module can be used as expected.

Hacking someone else's modules is not recommended. Perhaps this is just a workaround to see something work, but not guaranteed to work in long term. What happens, for instance, the node_modules is git ignored and you do an `npm install` later? — sjsam, Sep 22 '21 at 17:18

score 0 · Answer 8 · answered Oct 02 '22 at 08:24

0

could be fixed by putting

export default

instead of

export =

answered Oct 02 '22 at 08:24

Omid Farvid

785
7
13

Can't do a default import in Angular 9

8 Answers8

Linked