Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple Components: Augment vue using declare module 'vue' instead of declare module '@vue/runtime-core' (and declare module 'vue/types/vue') to avoid compilebreaks #6199

Closed
sceee opened this issue Aug 7, 2024 · 1 comment · Fixed by #6207
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add vue3-portable
Milestone

Comments

@sceee
Copy link
Contributor

sceee commented Aug 7, 2024

Describe the bug

primevue currently augments vue types using declare module '@vue/runtime-core' instead of the supposed declare module 'vue'.

This causes weird compilebreaks in combination with other popular packages (like vue-router - see this changelog entry and vue-i18n) that use the correct declare module 'vue' to augment vue types.
The official documentation states this here how to augment vue types correctly.

This is currently an issue in these components/code locations:

Above all of these locations, there is an augmentation declare module 'vue/types/vue' which should also be removed as of my understanding.

So I would suggest to remove the above code lines (declare module 'vue/types/vue') and instead change the declare module '@vue/runtime-core' locations to declare module 'vue' instead.

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-nhn9pu?file=src%2FApp.vue

PrimeVue version

4.0.4

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Have a typescript project that uses vue-i18n (and potentially vue-router):

  1. Add a translation to a component {{ $t('some.translation') }}
  2. Build the project using typescript
  3. See the build error

An error like error TS2339: Property '$t' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { xxxxxxxx: typeof xxxxxxxx; xxxxxxxx: typeof xxxxxx; ... 4 more ...; xxxxxx: typeof xxxxxx; }, ... 17 more ..., {}>' is logged.

Expected behavior

primevue augments vue types as described in the official docs using declare module 'vue' (instead of declare module 'vue/types/vue' or declare module '@vue/runtime-core').

@sceee sceee added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Aug 7, 2024
@sceee sceee changed the title Multiple Components: Augment vue using declare module 'vue' instead of declare module '@vue/runtime-core' (and declare module 'vue/types/vue') Multiple Components: Augment vue using declare module 'vue' instead of declare module '@vue/runtime-core' (and declare module 'vue/types/vue') to avoid compilebreaks Aug 7, 2024
sceee added a commit to sceee/primevue that referenced this issue Aug 9, 2024
Augment vue types instead of 'vue/types/vue' and '@vue/runtime-core' to fix incompatibility with other libraries caused by the current augmentation behavior

Fixes: primefaces#6199
@zyro23
Copy link

zyro23 commented Aug 17, 2024

i think primevue 3.53.0 is affected as well. i dropped a comment on the pull-request asking for a backport to v3 (#6207 (comment)). thanks!

mertsincan pushed a commit that referenced this issue Sep 4, 2024
Augment vue types instead of 'vue/types/vue' and '@vue/runtime-core' to fix incompatibility with other libraries caused by the current augmentation behavior

Fixes: #6199

Co-authored-by: sceee <11340487+sceee@users.noreply.github.com>
@mertsincan mertsincan added this to the 4.0.6 milestone Sep 4, 2024
@mertsincan mertsincan added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add vue3-portable and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add vue3-portable
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants