v2.0.22 Global components are no longer recognized

[cexbrayat]

Vue - Official extension or vue-tsc version

2.0.22

VSCode version

1.90.2

Vue version

3.4.30

TypeScript version

5.5.0

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 7.56 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.volta/tools/image/node/20.13.1/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 9.7.1 - ~/.volta/tools/image/npm/9.7.1/bin/npm
    pnpm: 9.4.0 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.126
    Safari: 17.5

Steps to reproduce

Using a brand new create-vue project (see Stackblitz repro):

• register a global component in main.ts

import App from './App.vue';
import HelloWorld from './components/HelloWorld.vue';

createApp(App).component('HelloWorld', HelloWorld).mount('#app');

• use it in App.vue without importing it:

<script setup lang="ts"></script>

<template>
  <header>
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>
</template>

• add it in env.d.ts for vue-tsc:

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    HelloWorld: typeof HelloWorld;
  }
}

• run npm run type-check:

> vue-tsc --build --force

src/App.vue:14:8 - error TS2339: Property 'HelloWorld' does not exist on type '{}'.

14       <HelloWorld msg="You did it!" />

• downgrade vue-tsc to an older version, run npm i && npm run type-check: the type-checking succeeds.

Link to minimal reproduction

https://stackblitz.com/edit/github-gnrqhx?file=src%2FApp.vue,env.d.ts

Any additional comments?

No response

[RayGuo-ergou]

change @vue/runtime-core to vue will make it work, I had this issue with pnpm before due to how pnpm handle peers, but it seems with newest version npm also have the same issue 🤔

[cexbrayat]

@RayGuo-ergou You're right that fixes it, but it used to support @vue/runtime-core. I'm wondering if this no longer works on purpose (and if so it should maybe be mentioned in the changelog).

[skywalker512]

Some of the information here may be helpful.

https://github.com/vuejs/language-tools/issues/4501#issuecomment-2190384987

[powerfulh]

@cexbrayat Which older version work?

[davidmatter]

I've documented global components in the wiki. Please check and let me know if this approach works for you.

[powerfulh]

Thank you very much. It work now!

[cexbrayat]

👍 Thanks for clarifying @davidmatter

[webdevnerdstuff]

I've documented global components in the wiki. Please check and let me know if this approach works for you.

That does not work for me unfortunately. I also tried solutions in https://github.com/vuejs/language-tools/issues/4501 and they did not work either.

The only thing that kinda worked was adding this to tsconfig.json

"vueCompilerOptions": {
  "lib": "@vue/runtime-core",
},

And then use

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    CustomComponent: typeof CustomComponent;
  }
}

declare module 'vue' causes it to not work with the tsconfig addition.

But when add the vueCompilerOptions that causes errors everywhere in my site that uses (for example) a var foo = ref(), to require adding the .value when using it in the <template> tags. The error it gives is Property 'foo' does not exist on type Ref.

Just for reference, if I import the component locally to a file, the types are there no problem. It's only when registering it globally I have this problem.