primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.6k stars 1.23k forks source link

Popover: Component type is missing #6134

Open BenJackGill opened 3 months ago

BenJackGill commented 3 months ago

Describe the bug

I am migrating from V3 to V4.

As per the migration docs the OverlayPanel has been renamed to Popover.

Previously I was using a template ref for the OverlayPanel with TypeScript support like this:

<template>
    <OverlayPanel ref="overlayPanelElement" />
</template>

<script setup lang="ts">
import type OverlayPanel from "primevue/overlaypanel";
const overlayPanelElement = ref<OverlayPanel | null>(null); // We now have a fully typed OverlayPanel template ref
// Do something here using overlayPanelElement such as 'toggle', 'show', or 'hide'
</script>

But when switching to the renamed Popover that solution no longer works:

<template>
    <Popover ref="popoverElement" />
</template>

<script setup lang="ts">
import type Popover from "primevue/popover";
const popoverElement = ref<Popover | null>(null); // <---- TYPESCRIPT ERROR SHOWS HERE
// Do something here using popoverElement such as 'toggle', 'show', or 'hide'
</script>

It now throws this TypeScript error:

'Popover' refers to a value, but is being used as a type here. Did you mean 'typeof Popover'?ts(2749)

One workaround is to use this, but it's a hassle and bad ergonomics:

const popoverElement = ref<InstanceType<typeof Popover> | null>(null);

Would love to have the proper types again please.

Note: I have provided a Stackblitz but the TypeScript error is not visible there. See screenshot below for the IDE error:

Screenshot 2024-07-29 at 10 14 19 AM

Reproducer

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

PrimeVue version

4.0.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

BenJackGill commented 3 months ago

I'm guessing the problem is more widespread, because I have also found the same issue with these other components, and there are probably more cases then this:

doug-shontz commented 2 weeks ago

Agreed. Thank you for the workaround, but, as a new user of PrimeVue, this drove me crazy for a bit trying to figure out.