Cannot import certain npm packages when using TypeScript

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.

[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.

[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';