Latest vue-tsc release breaks templates that use global variables.

[BryanHunt]

vue-tsc 0.34.12 breaks the following code:

<template>
  <div>
    <router-link to="/"> Home</router-link> |
    <router-link to="/about">About</router-link> |
    <a href="#" @click="$msal.instance.logoutRedirect()">Logout</a>
  </div>
  <router-view></router-view>
</template>

You get the error: Property '$msal' does not exist on type...

[xiaoxiangmoe]

see https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

[johnsoncodehk]

Hi @BryanHunt, it seems correct report, this error should be come from fixed #1264.

[CapitaineToinon]

I have the same problem on v0.38.2 trying to use Volar on a Nuxt 2 project.

<template>
  <button
    class="text-gray-900 dark:text-gray-50"
    @click="$router.push('/')"
  >
    <HeroIconsHome />
  </button>
</template>

Property '$router' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & Readonly<...> & Sha...'.ts(2339)

However if I add an empty script tab to my SFC, the error disappears. $router becomes typed as any but I believe that's normal in a Vue 2 application.

package.json

"@vue/runtime-dom": "latest",

tsconfig.json

  "vueCompilerOptions": {
    "target": 2, // For Vue version <= 2.6.14
  },

[johnsoncodehk]

@CapitaineToinon I guess tsconfig compilerOptions.types is missing vue-router global types reference, if you can send me minimal reproduction I will take a look.

[rchl]

For Nuxt 2 projects you want to install @nuxt/types and add it to types in tsconfig.json.

[CapitaineToinon]

I already have @nuxt/types in the tsconfig.json.

Here is a repo with simple reproduciton, created with the following commands:

npx create-nuxt-app 1288-volar

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in 1288-volar
? Project name: 1288-volar
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? capitainetoinon
? Version control system: Git

🎉  Successfully created project 1288-volar

  To get started:

	cd 1288-volar
	npm run dev

  To build & start for production:

	cd 1288-volar
	npm run build
	npm run start


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

• installed @vue/runtime-dom
• set "jsx": "preserve" in tsconfig.json
• set "vueCompilerOptions": { "target": 2 } in tsconfig.json
• Created this simple index.vue

<template>
  <button @click="$router.push('/')">1288</button>
</template>

And getting this error on the $router object:

any
Property '$router' does not exist on type '{}'.ts(2339)

[rchl]

It seems to work with "target": 2.7 in tsconfig.json.