Vue should render a compilation error for invalid prop keys

[wmelton]

While it's logical, and even consistent with other code conventions, when defining props on a component, if invalid prop keys are used, an explicit error should be thrown.

Currently only a unhelpful warning is rendered in the console, but the warning doesn't actually describe the real issue.

For example, if you defined a component prop key you will get the following warning even after passing a value for the key prop:

[Vue warn]: Invalid prop: type check failed for prop "key". Expected String with value "undefined", got Undefined

Contrived example:

Child Component:

<template>
   // ... some template code
</template>
<script setup lang="ts">
const props = defineProps({
   key: {
     required: true,
     type: String
  }
})
</script>

Parent Component

<template>
  <ChildComponent key="xyz" />
</template>

This will again render the warning:
[Vue warn]: Invalid prop: type check failed for prop "key". Expected String with value "undefined", got Undefined

By changing our prop to something like, "componentKey", then it works as expected.

I think that where we have component props that are not allowed values, explicit errors should be thrown rather than these undefined warnings which aren't transparent to the real issue.

[LinusBorg]

That idea is incompatible with the concept of fallthrough attributes though.

[skirtles-code]

I think the suggestion is specifically about special attribute names like key and ref that can't be used as either component props or fallthrough attributes. It seems like it should be possible to have a warning if those prop names are included in the component's prop definition.

[wmelton]

@LinusBorg I agree with @skirtles-code here - I think this is a special case where vue itself has disallowed component prop names. In those limited cases, a meaningful error should be thrown. I do not think this is incompatible with fallthrough attributes given it is a special case where Vue itself will not do anything with that prop to begin with. The current warning that is generated provides no value from a DX perspective.