declare module 'vue' breaks types for auto imported components

J-Michalek commented 3 months ago

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: https://github.com/vuejs/pinia/commit/8a6ce86db83b6315c067c8a98c898b3c74efe62e#diff-094806c433011456914201ea662b339b53b9b1236f3226c1da3fd807106ad8a8R43

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

posva commented 3 months ago

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 commented 3 months ago

I've been in a similar situation

J-Michalek commented 3 months ago

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 commented 3 months ago

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): https://github.com/freqtrade/frequi/pull/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 commented 3 months ago

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

vuejs / pinia