Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

182
Views
Can't do a default import in Angular 9

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.

over 4 years ago · Santiago Trujillo
5 answers
Answer question

0

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

import ms from "ms";
over 4 years ago · Santiago Trujillo Report

0

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);
  }
over 4 years ago · Santiago Trujillo Report

0

You can just do something like this

import * as printJS from 'print-js'
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

"allowSyntheticDefaultImports": true

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!