Wrong generated JS code by TypeScript and AMD ( + UMD)

[80LevelElf]

Version

2.5.2

Reproduction link

https://github.com/80LevelElf/VueProblemApp

Steps to reproduce

Just run the app by opening the
/VueProblemApp/VueProblemApp/index.html file and you will see the error in the Console.

What is expected?

The Typescript compiler should take Vue typings and produce the right code.

What is actually happening?

The resulted JS code is not right (see comments for detail explonation).

---

I want to use Vue.js in my Typescript application. I try to add it via NPM.
Package.json:

{
	"name": "DoIt",
	"version": "1.0.0",
	"private": true,
	"description": "",
	"keywords": [],
	"dependencies": {
		"vue": "^2.5.2",
		"vue-class-component": "^6.0.0",
		"vue-property-decorator": "^6.0.0",
		"vue-router": "^3.0.1"
	}
}

tsconfig.json:

{
	"compilerOptions": {
		"noImplicitAny": false,
		"noEmitOnError": true,
		"removeComments": false,
		"sourceMap": true,
		"target": "es2015",
		"module": "amd",
		"moduleResolution": "node",
		"rootDir": "/Scripts",
		"baseUrl": "/Scripts"
	},
	"exclude": [
		"node_modules",
		"wwwroot"
	]
}

Then I try to use it:

import Vue from "vue";

export class LogController {
	private vue: Vue;
	
	public start() {
		this.vue = new Vue( {
			el: "#log-data",
			data: {
				logData: {}
			}
		});
	}
}

As you can see in my tsconfig file I use the AMD module system. That means that each import x should produce some information in the define function in the result JS file. And it is:

define(["require", "exports","vue"], function (require, exports, vue_1) {
	"use strict";
	Object.defineProperty(exports, "__esModule", { value: true });
	class LogController {
		start() {
			this.vue = new vue_1.default({
				el: "#log-data",
				data: {
					logData: {}
				}
			});
		}
	}
	exports.LogController = LogController;
});

But the problem is on some step something goes wrong and I get the wrong generated code.
vue_1 in the JS code above is a Vue constructor (and it is right). And I should get this:

this.vue = new vue_1({

Instead of this:

this.vue = new vue_1.default({

Of course, vue_1.default is undefined and it gives me an error.

Note: I use this vue.js file version - the right one for AMD and UMD module system. And I have the same problem when I try to use UMD module system vie tsconfig.
Used Typescript version is 2.6.2.

[Micene09]

Same problem here, i'm trying to fix it for:
https://github.com/Micene09/vue-ts-amd

...but, as I can see, there is no default export in vue(.min).js.
As a workaround you can try to use:

import { Vue } from "vue-property-decorators";

...this is the only way I can get it working for now, keep in mind that this is not the real solution.

[80LevelElf]

@Micene09 Thanks!
It works. I use it until a normal fix is not deployed.

[yyx990803]

There seems to be nothing in your config that points the "vue" module to the vue.js UMD build you included yourself. So the TS compiler is resolving it from node_modules/vue and using the "main" field in package.json, which is a CommonJS build. You need to specify the mapping using compilerOptions.paths in your tsconfig.

[80LevelElf]

Thanks!
Sorry for my mistake