Vue is undefined when importing in Typescript

[leebenson]

Version

2.5.13

Reproduction link

https://codesandbox.io/s/4895o6nm24

Steps to reproduce

Using Typescript 2.7.1, importing Vue 2.5.13 results in undefined.

To reproduce, create a blank .ts file:

import Vue from "vue";
console.log(Vue); // <-- will be `undefined` (or `null` in Code Sandbox)

This can be fixed by importing like:

import * as Vue from "vue";

... but then new Vue() returns the TS error:

test.ts (3,1): Cannot use 'new' with an expression whose type lacks a call or construct signature. (2351)

Changing this to new Vue.default(); resolves the TS error, but then results in a Node error:

TypeError: Vue.default is not a constructor

What is expected?

No errors

What is actually happening?

See above

Note: I'm not using Webpack in this example. What I assume is happening (referencing the recommended tsconfig.json config) is that import statements are being as-is by Typescript, for Webpack to pick up and use properly.

However, I think that this should be improved to work with Typescript directly, without requiring Webpack to enter the mix. This would benefit server-only environments where code transpilation isn't necessarily required.

[ktsn]

Duplicate of #7392
You may want to enable --esModuleInterop https://www.typescriptlang.org/docs/handbook/compiler-options.html

[terrymun]

@leebenson Just want to say, thanks for the revelation! I have consistently experienced issues with webpack + TypeScript not resolving imports properly, and it turns out that using import * as Vue from "vue"; works, while import Vue from "vue" actually returns null: https://codesandbox.io/s/mjvjw2xw39

[Kocal]

Thank you so much @ktsn, it works like a charm ❤️ ✨