VSCode "auto import" of ESM module broken in 2.6.11 with umd namespace

[chuckmah]

Version

2.6.11

Reproduction link

https://imgur.com/a/RxJz6fT

Steps to reproduce

Since the 2.6.11 my IDE (VSCode) now suggest me import Vue from the 'vue/types/umd' namespace instead of the ESModule 'vue'

I'm using Vue 2.6.11 Vue-CLI 4.1.0 VScode 1.41.1 Typescript 3.7.4

What is expected?

Prior 2.6.11, VScode was suggesting to import Vue from 'vue'

What is actually happening?

VSCode is suggesting me to import Vue from 'vue/types/umd' see screenshot

---

maybe it's releated to https://github.com/vuejs/vue/pull/9912 ?

[posva]

You should import it from vue-property-decorator like import { Component, Vue } from 'vue-property-decorator'

It looks like Vue is automatically imported within VSCode as creating an empty vue file already allows you to use Vue with correct typings, so I imagine it would make sense for the IDE to not be able to import automatically. I don't know if this is something we can improve. @octref do you know if this is possible to change here or somewhere else?

[octref]

Does this happen for TS file as well?

[chuckmah]

Does this happen for TS file as well?

yes

[octref]

Then it's a typing/TS server issue, not Vetur specific. #9912 does seem related, /cc @ktsn.

[ktsn]

I cannot reproduce it with the exact same versions of Vue, VSCode and TypeScript. Could you provide example project reproducing the issue as GitHub repo?

[posva]

I reproduced it with the cli by creating a project with babel + ts and upgrading ts to its latest version (but it appears on 3.5.3 too)

[chuckmah]

You should import it from vue-property-decorator like import { Component, Vue } from 'vue-property-decorator'

vue-property-decorator simply re-export a named Vue from the default export of the 'vue' package. There are a lot of case in typescript when you don't you use the decorator (in a Vuex store for example) and don't want to import Vue fromthe vue-property-decorator package (ie. code splitting)

I dont know if it's VSCode or TSServer related but the auto-import suggesting was always import Vue from 'vue' prior 2.6.11 and that what we have everywhere our codebase.

[ktsn]

I reproduced it with the cli by creating a project with babel + ts and upgrading ts to its latest version (but it appears on 3.5.3 too)

That's strange. I did the same thing while I tested it. Maybe editor config or some env specific things differentiate the behavior? It does not suggest auto-import on my end even though I enabled auto-import config.

[chuckmah]

I reproduced it with the cli by creating a project with babel + ts and upgrading ts to its latest version (but it appears on 3.5.3 too)

That's strange. I did the same thing while I tested it. Maybe editor config or some env specific things differentiate the behavior? It does not suggest auto-import on my end even though I enabled auto-import config.

You can try it directly in a .ts file , you should have auto-import

[octref]

Can you please be more precise, for example, I did this and it doesn't reproduce for me:

mkdir foo
cd foo
yarn add vue vue-property-decorator
touch test.ts
code .

• Put below code into test.ts

  import { Component } from 'vue-property-decorator'
  
  export default class Foo extends Vue {
  
  }

• Have all extension diabled

• Complete on Vue

• I don't get the completion

• I'm on VS Code 1.41.0, vue 2.6.11, vue-property-decorator 8.3.0

[chuckmah]

@octref from you example if you add Typescript you will have the auto-import suggesting by clicking on the 💡 from VSCode.

here's how i reproduced it using minimal deps (not the vue-cli)

mkdir foo
cd foo
yarn add typescript vue vue-property-decorator
npx tsc --init --module "ES6" --lib "ES6" --target "ES6" --types "vue" --moduleResolution "Node"
touch TestVue.ts
code .

inside TestVue.ts

const component:Component = Vue.extend({});

The named import work i still get the suggestion to import from 'vue'

But the default import do not appear

If i revert back to 2.6.10 i get the correct suggestion from the 'vue'

Maybe it's a TSServer issue 😕 .. but because some of my dev on my team just use the suggested import regardless, i had to revert back to 2.6.10

[octref]

Thanks, I can repro now, but this is not a Vetur problem, but a Vue types / TS Server issue.