"Missing required prop" warning after mounting component with union as props
Vue version
3.3
Link to minimal reproduction
Steps to reproduce
Open console; observe warning.
What is expected?
No warning.
alternatively, one of:
- a proper error which says you can't make the props a union
- a way to suppress this warning for a specific component (eg an attribute on
<script>)
What is actually happening?
System Info
System:
OS: Linux 6.5 Manjaro Linux
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Memory: 19.29 GB / 31.23 GB
Container: Yes
Shell: 3.6.1 - /usr/bin/fish
Binaries:
Node: 20.5.1 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 9.8.1 - /usr/bin/npm
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
No response
Both cross type and union type compiled props are required.
props: {
foo: { type: String, required: true },
bar: { type: Number, required: true }
},
But you can make them optional
<script setup lang="ts">
const props = defineProps<{foo?: string} | {bar?: number}>();
</script>
if it's categorically illegal then it should be a proper error which refuses to type-check
putting a union in defineProps should, like, be either allowed or not allowed. not this limbo state.
cc/ @sxzz
similar to https://github.com/vuejs/core/issues/8952 maybe we should generate a runtime validator for prop.
Would love it if I could at least suppress the runtime type check warning because other than that it works fine.
@edison1105 Should vue core handle this? vue-macros is suitable for this work IMO.
This can be listed as an improvement of vue/core at the compiler level
Hey, I think this would make the template attributes behave as expected. Can someone confirm this?
File: vuejs/core/packages/runtime-core/src/componentPublicInstance.ts
type UnionOmit<T, K extends keyof any> = T extends T ? Omit<T, K> : never
...
/* line 211 */ ? Partial<Defaults> & UnionOmit<P & PublicProps, keyof Defaults>
...
I took the idea for T extends T from here