Type-Error because of 'declare module "@vue/runtime-core"'

[delphi-sucks]

What happened?

If one defines a global variable like described in the vue documentation within a typescript project with define module "vue" { ... }, then all quasar components don't get resolved within the template anymore.

This results in vue-tsc throwing errors and VSCode, with the official Vue extension, not being able to resolve the component to show hints.

What did you expect to happen?

The quasar components should still resolve correctly if a user (or another package) defines a global vue variable.

Reproduction URL

https://github.com/delphi-sucks/quasar-bug-define-module-vue

How to reproduce?

1. Create a new quasar project with typescript and vue-tsc with at least version 2.0.29
2. Create a new file with a global Vue variable
3. Run vue-tsc (vue-tsc -p tsconfig.vue-tsc.json) or open a vue-file which uses a quasar component and verify that the component doesn't get resolved (unknown)

example-global-var-definition.d.ts

declare module 'vue' {
  interface GlobalComponents {
    // ...
  }
}

export default {};

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

TypeScript Support

Platforms/Browsers

Other

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 20.12.2

Global packages
  NPM - 10.8.2
  yarn - 1.22.22
  pnpm - 9.6.0
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.15 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.35 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.2
  pinia - Not installed
  vuex - Not installed
  vite - 5.3.5 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.4 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  *Not relevant*

Relevant log output

> [email protected] typecheck
> vue-tsc --noEmit -p tsconfig.vue-tsc.json

src/pages/IndexPage.vue:9:38 - error TS7006: Parameter 'event' implicitly has an 'any' type.

9     <q-btn label="Press me" @click="(event) => console.log(event)" />
                                       ~~~~~


Found 1 error in src/pages/IndexPage.vue:9

Additional context

This is a problem which was introduced with the latest vue/vue-tsc/volar changes.

Projects are slowly migrating from define module "@vue/runtime-core" to define module "vue" like vue-router and having packages with different ways to implement global vue variables can result in unexpected behaviour like quasar components not being resolvable anymore.

[Wangijun]

The same problem has occurred, and it has now affected normal development

[yusufkandemir]

Thanks for reporting. It didn't work for me even without the GlobalComponents custom augment in the project. So, the issue is not specific to users that use custom augmentation.
According to vuejs/language-tools#4170 (comment), augmenting only one of the packages can't guarantee it will work. So, we should augment all vue, @vue/runtime-core, and @vue/runtime-dom. I will handle this.

[Wangijun]

My current situation is that the component can be parsed and there are no errors during development, but after running it, vue tsc reports such an error. All of these writing methods result in vue tsc reporting an error.

[delphi-sucks]

My current situation is that the component can be parsed and there are no errors during development, but after running it, vue tsc reports such an error. All of these writing methods result in vue tsc reporting an error.

Are you possibly using an older version of the VSCode Extension for vue "Vue - Official" (vue.volar)? Mine stopped automatically updating at some point and with the older versions the component still gets resolved correctly. I guess if you update to the latest version (v2.0.28), you will also see the problem in VSCode.

[Wangijun]

My current situation is that the component can be parsed and there are no errors during development, but after running it, vue tsc reports such an error. All of these writing methods result in vue tsc reporting an error.

Are you possibly using an older version of the VSCode Extension for vue "Vue - Official" (vue.volar)? Mine stopped automatically updating at some point and with the older versions the component still gets resolved correctly. I guess if you update to the latest version (v2.0.28), you will also see the problem in VSCode.

I am currently in version v2.0.28, and only the vue tsc error appears in the console after executing quasar dev, but there is no error prompt in the editor,

[yusufkandemir]

The fix will be included in the next quasar package release.

[Logima]

This still seems to be broken when a project augments ComponentCustomProperties and uses custom augmentation from another project, e.g. vue-router.

Here is a repro.

$ pnpm vue-tsc --noEmit -p tsconfig.vue-tsc.json
src/pages/IndexPage.vue:58:19 - error TS2339: Property '$route' does not exist on type 'CreateComponentPublicInstance<{}, {}, { todos: Todo[]; meta: Meta; }, {}, { getRoutePath(): string; }, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.

58       return this.$route.fullPath;
                     ~~~~~~


Found 1 error in src/pages/IndexPage.vue:58

Reference to this.$route fails unless Quasar's ComponentCustomProperties augmentation is changed from declare module \'@vue/runtime-core\' to declare module \'vue\'.

Could @yusufkandemir take another look at this please?

[yusufkandemir]

@Logima you are right, we've overlooked that part. For simplicity purposes, I will just reopen this issue instead of creating a new one.

[Zeph33]

in quasar/dist/types/index.d.ts

declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
     $q: QVueGlobals;

Fix buid.types.js
quasar/ui/build/build.types.js
replace line 622

  // Extend Vue instance with injections
  writeLine(contents, 'declare module \'@vue/runtime-core\' {')
  writeLine(contents, 'interface ComponentCustomProperties {', 1)

by

  // Extend Vue instance with injections
  writeLine(contents, 'declare module \'vue\' {')
  writeLine(contents, 'interface ComponentCustomProperties {', 1)

[skromm]

Do you have any news about a new release of Quasar solving this bug? Can you propose a workaround?

[rstoenescu]

Fix will be available in Quasar v2.17+