Subscribe on changes!

Disallowed component prop keys should render explicit error

avatar
Feb 6th 2024

Vue version

latest

Link to minimal reproduction

https://gist.github.com/wmelton/534f7466e536d215d4c50e5d7a861a93

Steps to reproduce

See minimal reproduction link. If you define a component with a prop key of key then a warning will be thrown that doesn't describe what the issue actually is.

What is expected?

Given that specific prop keys are not allowed by vue implicitly, it should be converted to an explicit error with a specific message that indicates that specific component prop keys are disallowed or will not render correctly by Vue.

The current DX is non-transparent about what the root issue actually is. An error message like:

[Error]: "key" is not an allowed component prop would go a long way in debugging an error like this.

What is actually happening?

if you define 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

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

System Info

No response

Any additional comments?

No response