Vue-cli: Cannot import certain npm packages when using TypeScript

[ffxsam]

Version

3.0.0-rc.10

Node and OS info

Node 8.10, yarn 1.9.2, macOS 10.13.6

Steps to reproduce

https://github.com/ffxsam/repro-import-bug

1. Clone repo
2. Run yarn && yarn serve
3. See critical error.

What is expected?

I expect the app to run with no issues.

What is actually happening?

Error is given: Cannot invoke an expression whose type lacks a call signature. Type 'typeof moment' has no compatible call signatures.

---

Using import moment from 'moment' also does not work.

[ffxsam]

Some other imports require different syntax now. For instance, in a traditional JS project, this is fine:

import validator from 'validator';

In a TS project, it's not:

ERROR in /Users/samh/repro-import-bug/src/components/HelloWorld.vue
38:8 Module '"validator"' has no default export.

This fix works for validator, but does _not_ work for moment:

import * as validator from 'validator';

[yyx990803]

This seems to be a bug in TypeScript, because per its documentation, allowSyntheticDefaultImports should be true by default when esModuleInterop is true.

In this case, it only works properly when allowSyntheticDefaultImports is explicitly set to true.

Note: Vue CLI simply scaffolds a standard usage for upstream deps like webpack and typescript, it doesn't do any magic beyond the tsconfig.json in your project. In the future, please try to locate your issues in upstream tools first before opening an issue in Vue CLI.

[yyx990803]

Closed via 350f77b9

[ffxsam]

Ah, gotcha. Still, glad to see a simple tsconfig.json change in the Vue TS template fixes it!

[sodatea]

Just came across this comment:

We only consider esModuleInterop to imply allowSyntheticDefaultimports when the module target is commonjs, amd, umd, or system.

So it's a bug in their documentation. 🙁

[DanielRosenwasser]

Should be fixed by https://github.com/Microsoft/TypeScript-Handbook/commit/8e974c814d44381ed05a3b6203894e0f9e39d552, and we'll update the website documentation soon. Sorry about all this.

[ffxsam]

@DanielRosenwasser Ahh, yes. My module prop is set to esnext. Thanks!