The latest Vue.js brings about a deadly change: https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

The Catalyst

Normally, you'd import Vue.js like this:

import * as Vue from 'vue';

This also applies to most other frameworks, like React, AngularJS, etc.

However, the latest Vue.js 2.5 updated the typings so that you must do this:

import Vue from 'vue';

vuejs/vue#5887
vuejs/vue#6391

The Explanation

Normally this is called an ES module default export / import. For example:

export function x(){}
export function y(){}
export function z(){}
export default function a(){}

Is actually an object:

{
  x: function(){},
  y: function(){},
  z: function(){},
  default: function(){},
}

Therefore when you do this:

import { x, y, z } from './myModule';
import a from './myModule';

You are actually plucking the properties from the exported object!

The Problem

Now you see, by forcing Vue.js default import, you are to expect that the exported Vue.js object has a default property.

However, that is not the case!

The typing is NOT the same as the exported object, which looks somewhat like this: (not default-exported)

{
  component: function(){},
  filter: function(){}
}

When imported using the normal import * as Vue from 'vue' or import Vue = require('vue') syntax, this is correct...

However, this is causing a huge mess when the app code is being forced to use default import syntax.

The Solution

Unlike Browserify; WebPack and Rollup appears to magically convert default imports into star import for libraries which are not default-exported ES module...

Now, we can solve this issue either with the easy way or the hard way:

The easy way would be to simply replace Browserify module bundler with WebPack or Rollup.

The hard way would be to somehow write a transform that emulates this behavior. No idea how for now...

If this feature is completed, allowSyntheticDefaultImports flag in tsconfig.json in projects can be enabled.

The Workaround

Stay on these package versions, for now:

• vue 2.4.4
• vue-class-component 5.0.2
• vue-router 2.7.0
• vuex 2.4.1

Templates will be updated to exact semver for those packages, until the feature is completed.