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'
...
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
}
...