declare module 'vue' breaks types for auto imported components

[J-Michalek]

Reproduction

N/A

Steps to reproduce the bug

1. Declare global component types under vue module:

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

2. Install pinia 2.2.0
3. Check for TS errors inside of Vue components that make us of the global components

Expected behavior

It should not break the types for global components.

Actual behavior

Breaks the types for global components

Additional information

I am pretty sure this is the change that broke this in our project:
8a6ce86#diff-094806c433011456914201ea662b339b53b9b1236f3226c1da3fd807106ad8a8R43

We use https://github.com/unplugin/unplugin-vue-components and the types it generates seemingly conflict with the ones Pinia declares.

[posva]

In the ecosystem we were using @vue/runtime-core but the recommended way was to use vue and it took some time to adapt. At some point in time, upgrading TS versions and other dependencies required this change. In my testing, this change didn't break other libraries using @vue/runtime-core when using up-to-date dependencies and dev dependencies. You might need to update TS

[mxp131011]

I've been in a similar situation

[J-Michalek]

We are running on the latest TS version (5.5.4) but the issue is there after i update Pinia.

The only deps that are not up to date seem unrelated to this issue. I have listed them below.

dev deps:

• eslint
• eslint-plugin-chai-friendly

deps:

• vue-final-modal
• vuex

[xmatthias]

I think the key here is the use in combination with unplugin-vue-components or unplugin-auto-import.

the generated component.d.ts file contains something around the following, then:

...
export {}

/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    MyComponent: typeof import('./components/MyComponent.vue')['default']
    MyOtherComponent: typeof import('./components/MyOtherComponent.vue')['default']
...
}

In my case - the update in the dependabot group broke all type-checks.
Reverting (and hard-pinning) pinia fixes this behavior again - with this, pinia is now the only dependency not uptodate.

edit while not a good, minimal reproduction (it's just my project breaking) - this PR showcases that the update of pinia breaks check-types (Ci is passing on main):
freqtrade/frequi#2004

Also noteworthy: the type-check failures are not due to pinia usage, but due to random, other, auto-imported utility functions. (which in hindsight, would make it more reasonable that it's acutally conflicting with unplugin-auto-import).

[posva]

Probably unrelated, but in your project, you should try out upgrading the moduleResolution to Bundler: https://github.com/freqtrade/frequi/blob/main/tsconfig.json#L8

I tested locally by adding unplugin-vue-components to https://github.com/posva/demo-data-loaders-artwork-gallery, and it works, so I think you have something in your TS config breaking it. I'm moving this to a question so anybody can try to figure it out and propose and answer

[xmatthias]

so you're implying that it's caused by something else - which would be curious - as then it's really a pinia bug - as pinia is the only thing changing.

[posva]

as then it's really a pinia bug - as pinia is the only thing changing.

I wished the web and Vue ecosystem was that simple!

FYI, the change of the declare module was necessary in pinia's codebase, and it's also the recommended approach, so it's not something I can just revert and it's also why I'm suspecting the issue to be somewhere else. If you want to help, digging further to see why this error appears and opening a PR to the relevant repository would really move things forward!

[xmatthias]

I'm not sure i can replicate what you're saying above.

using pinia 2.2.0 and hot-patching the pinia module - i can get "no type-check" back again

---

have you got a doc reference (would be vue docs?) to where this approach is recommended so i can dig deeper? i honestly did struggle to find a proper reference to shi.

[posva]

BTW: updating vue-router's d.ts to also use declare module 'vue' makes everything work. Using multiple declare module at the same time like auto imports breaks the in template auto imports.

Edit: released vue-router with the update and it's fixed

[posva]

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

[xmatthias]

Quite interesting - auto-import seems to export both - declare module 'vue' { as well as declare module '@vue/runtime-core' { in their auto-generated file ... most likely to avoid some odd behavior already.

The update in vue-router does fix it though 👍

[J-Michalek]

Thank you guys for resolving it!

[cooper667]

This fix breaks one of our repos (but fixes another 🤷 ) with effectively the same dependencies (as far as i can tell, the ones that seem relevant to me match exactly. I'm basically just commenting here to see if this has affected anyone else!

(Commenting out export interface GlobalComponents {}, tsc is happy, with it in, there's all kinds of chaos, mostly around generic vue components it seems)

All of this seems like a higher vue or TS augmenting issue really