Type Definitions broken in 2.3.0?

[eugirdor]

Vue.js / vue-router versions

2.1.2 / 2.3.0

Reproduction Link

Steps to reproduce

Using Typescript 2.2.1 and Webpack 2.2.1

In VueRouter 2.2.1 importing was done with import VueRouter = require('vue-router') but it looks like in 2.3.0 it needs to be import VueRouter from 'vue-router'.

The issue is that it looks like the type definitions still define the export as export = VueRouter where it needs to be export default VueRouter now.

What is Expected?

Importing 'vue-router' the proper way should not give a compiler warning.

What is actually happening?

When Using: import VueRouter = require('vue-router')
You Get: Uncaught TypeError: VueRouter is not a constructor

When Using: import VueRouter from 'vue-router
You Get: Compiler warning that vue-router has no default export

[yyx990803]

/cc @ktsn

[yyx990803]

For now I think you can work around this by configuring a webpack alias pointing vue-router to vue-router/dist/vue-router.common.js instead?

[eugirdor]

@yyx990803 Yes, that workaround works. Thanks.

[ktsn]

This is because TypeScript treats module.exports = VueRouter and export default VueRouter as different things. We can fix this by defining static default property in VueRouter class in typings...

Also we need to update core's typings. I'll create some PRs.

[ktsn]

Hmm, I found the above approach is problematic... If we declare default static property in VueRouter class to deal with both ESModules and commonjs, both import VueRouter from 'vue-router' and import VueRouter = require('vue-router') works but the former imported class does not allow inheritance. 😞

I think the most compromisable solution is to remove module field from package.json and let the users can select esm build by using alias like other build.

@HerringtonDarkholme Do you have any better idea to deal with this problem?

[yyx990803]

If that's the case, I'd prefer supporting import X from 'x' by default instead. Users who want to keep using import X = require('x') will need to config the alias. <- is that even possible?

[HerringtonDarkholme]

Hi, @eugirdor . For now you can use allowSyntheticDefaultImports to build app.

I think Vue typing will have a fix release.

[yyx990803]

See updated TS integration docs: https://vuejs.org/v2/guide/typescript.html

[xingangsun]

@yyx990803

For now I think you can work around this by configuring a webpack alias pointing vue-router to vue-router/dist/vue-router.common.js instead?

Does this configuration support webpack2 tree-shaking？