1

I am using cleave.js (^1.5.2) in an Angular 6 application along with the @types/cleave.js package (^1.4.0) and an odd thing is happening. If I run ng build to build the application it fails with the following errors:

ERROR in src/app/app.component.ts(4,8): error TS1192: Module '"C:/Users/evcomes/Angular2/hellogular/node_modules/@types/cleave.js/index"' has no default export.
src/app/app.component.ts(5,8): error TS1192: Module '"C:/Users/evcomes/Angular2/hellogular/node_modules/@types/cleave.js/options/index"' has no default export.

I see that that is true in the source for @types/cleave.js, but it's just a type library, why would I need a default export? And the really weird part is if I then modify (insignificantly) a file and then save, the automatic rebuild picks that up (still shows the error, but continues), will happily serve the angular app in development, and the cleave.js functionality that I was using even works in my browser. So is this not a real error? How can I turn it off?

Any of the tutorials or guides I have seen for using the DefinitelyTyped libraries just say that npm installing them should be sufficient to use them without any other modifications, so most of the issues I find when searching for this are people trying to make their own TypeScript bindings for JS libraries or their own modules in general.

In package.json:

...
"@types/cleave.js": "^1.4.0",
"cleave.js": "^1.5.2"
...

In my tsconfig.json:

...
"esModuleInterop": true,
"typeRoots": [
   "node_modules/@types"
]
...

In my app.component.ts:

...
import Cleave from 'cleave.js';
import CleaveOptions from 'cleave.js/options'
...
Evan C
  • 141
  • 10
  • 1
    You are importing both as the defaults. Try either `import * as Cleave from 'cleave.js'` or `import { Cleave } ...`. What do the typings file show as exports? – pmkro Jul 16 '19 at 23:12
  • Ah okay, the `import * as CleaveOptions...` thing worked, but when I do that for just Cleave, it gives me another error: `ERROR in src/app/app.component.ts(4,25): error TS2497: Module '"C:/Users/evcomes/Angular2/hellogular/node_modules/@types/cleave.js/index"' resolves to a non-module entity and cannot be imported using this construct.` The source for this file can be seen here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cleave.js/index.d.ts – Evan C Jul 17 '19 at 14:06
  • 2
    `export = Cleave;` means that you need to set `allowSyntheticDefaultImports: true` in your `tsconfig` – pmkro Jul 17 '19 at 14:53
  • 1
    That did the trick along with using the `import Cleave from 'cleave.js'` form. Do you want to make an answer out of this so I can give you rep? – Evan C Jul 17 '19 at 16:08

1 Answers1

3

Most js libs that get TS types use either ...* as.... Or require allowSyntheticDefaultImports: true in your tsconfig for default exports to work correctly.

import * as CleaveOptions from 'cleave.js/options'
// AND
import Cleave from 'cleave.js'

//tsconfig.json
...
{
  allowSyntheticDefaultImports: true
}
...
pmkro
  • 2,542
  • 2
  • 17
  • 25