InputText: Interface 'InputTextProps' incorrectly extends interface 'InputHTMLAttributes'. Password: Interface 'PasswordProps' incorrectly extends interface 'InputHTMLAttributes'.

[limsbeheer]

Describe the bug

tsc --build fails with the following errors:

node_modules/primevue/inputtext/InputText.d.ts:85:18 - error TS2430: Interface 'InputTextProps' incorrectly extends interface 'InputHTMLAttributes'.
  Types of property 'size' are incompatible.
    Type 'string | undefined' is not assignable to type 'Numberish'.
      Type 'undefined' is not assignable to type 'Numberish'.

85 export interface InputTextProps extends InputHTMLAttributes {
                    ~~~~~~~~~~~~~~

node_modules/primevue/password/Password.d.ts:168:18 - error TS2430: Interface 'PasswordProps' incorrectly extends interface 'InputHTMLAttributes'.
  Types of property 'disabled' are incompatible.
    Type 'boolean | undefined' is not assignable to type 'Booleanish'.
      Type 'undefined' is not assignable to type 'Booleanish'.

168 export interface PasswordProps extends InputHTMLAttributes {
                     ~~~~~~~~~~~~~

Reproducer

https://stackblitz.com/edit/vitejs-vite-gkvhqj?terminal=dev

PrimeVue version

3.50.0

Vue version

3.x

Language

ALL

Build / Runtime

TypeScript

Browser(s)

No response

Steps to reproduce the behavior

1. Browse to https://stackblitz.com/edit/vitejs-vite-gkvhqj?terminal=dev
2. Enter tsc --build in the terminal
3. Errors are shown.

Expected behavior

tsc --build succeeds without errors.

[sunny7dusk]

I am having issues with this as well. I am working on wrapping PrimeVue, and am unable to extend the associated props for InputText and Password. Other components such as ToggleButton and their props seem to extend just fine.

<script setup lang="ts">
import InputText, { InputTextProps } from 'primevue/inputtext';
const props = defineProps<InputTextProps>()
</script>
<template>
    <InputText v-bind="{...$attrs, ...props}">
        <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>
    </InputText>
</template>

[vite] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

[reitbauer]

I have the same problem extending the InputTextProps. I get this error:

[slavco86]

Same issue here 😭

[slavco86]

@tugcekucukoglu, @mertsincan , @cagataycivici , please please please - can this be prioritised. Since Prime applies a very composition oriented approach towards Inputs, there is an ever growing need to build your own Input components purely out of DX interest (I don't want to be copy pasting a template of 3 elements in particular order 100 times because my standard input needs to support floating label, helper text and icons all at the same time... I would have chosen Bootstrap otherwise). And this error makes it impossible to achieve this because it involves inevitably extending InputTextProps, which breaks TS.

[sebaranowski]

I'm also getting an error when I try to create a simple wrapper component... :sob:

[plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
...
node_modules/primevue/inputtext/InputText.d.ts
83 |   * Defines valid properties in InputText component.
84 |   */
85 |  export interface InputTextProps extends InputHTMLAttributes {
   |                                          ^^^^^^^^^^^^^^^^^^^
86 |      /**
87 |       * Value of the component.

The wrapper component:

<script setup lang="ts">
import type { InputTextProps } from 'primevue/inputtext';
import InputText from 'primevue/inputtext';

const props = defineProps<InputTextProps>();
</script>

<template>
  <InputText v-bind="props" />
</template>

I'm using nuxt-primevue module in a Nuxt app which comes with PrimeVue v3. Will this be resolved for v4? I mean this is quite crucial, isn't it?

EDIT: Just tested it with a fresh Nuxt setup and PrimeVue v4 but still the same error...

[thomaslecoeur]

I think this needs to be fixed urgently to be able to use Primevue as UI base while keeping TS functionnalties.

I'm having the same issue on the Button component.

[slavco86]

Would be nice to have some reaction from the maintainers 🙏

[doganalper]

Having same problem here, since InputText does not have built-in error display I am creating a component with a span element to display error messages and I cannot extend my component props from InputText prop.

[thomaslecoeur]

For now, using / @vue-ignore / before each extend has been "solving" the issue. But seems like a temporary fix.

Here is a full extend of the Button component :

<script lang="ts" setup>
import type { ButtonEmits, ButtonProps, ButtonSlots } from 'primevue/button';
import Button from 'primevue/button';

interface BaseHigdayButtonProps extends /* @vue-ignore */ ButtonProps {
  // Custom props
}
interface BaseHigdayButtonEmits extends /* @vue-ignore */ ButtonEmits {}
interface BaseHigdayButtonSlots extends /* @vue-ignore */ ButtonSlots {}

defineProps<BaseHigdayButtonProps>();
defineEmits<BaseHigdayButtonEmits>();
defineSlots<BaseHigdayButtonSlots>();

defineOptions({
  inheritAttrs: false,
});
</script>

<template>
  <div>
    <Button v-bind="$attrs">
      <template
        v-for="(_, name) in $slots"
        #[name]="scope"
      >
        <slot
          :name
          v-bind="scope"
        />
      </template>
    </Button>
  </div>
</template>

[DjilanoS]

For now, using / @vue-ignore / before each extend has been "solving" the issue. But seems like a temporary fix.

Here is a full extend of the Button component :

<script lang="ts" setup>
import type { ButtonEmits, ButtonProps, ButtonSlots } from 'primevue/button';
import Button from 'primevue/button';

interface BaseHigdayButtonProps extends /* @vue-ignore */ ButtonProps {
  // Custom props
}
interface BaseHigdayButtonEmits extends /* @vue-ignore */ ButtonEmits {}
interface BaseHigdayButtonSlots extends /* @vue-ignore */ ButtonSlots {}

defineProps<BaseHigdayButtonProps>();
defineEmits<BaseHigdayButtonEmits>();
defineSlots<BaseHigdayButtonSlots>();

defineOptions({
  inheritAttrs: false,
});
</script>

<template>
  <div>
    <Button v-bind="$attrs">
      <template
        v-for="(_, name) in $slots"
        #[name]="scope"
      >
        <slot
          :name
          v-bind="scope"
        />
      </template>
    </Button>
  </div>
</template>

It's not really a "fix" as you're binding the $attrs here. If you want to v-bind="props" along with interface DSButtonProps extends /* @vue-ignore */ ButtonProps, IButtonProps {} it won't work because the props from ButtonProps won't bind.

[thomaslecoeur]

@DjilanoS You're right it doesn't solve the issue and doesn't count as a solution, as the attrs are not interpreted as props. It just allowed better autocompletion for my vscode.

[Residufermente]

Same problem, a fix or a reaction from a maintainer would be appreciated