I've been using withDefaults
and defineProps
for a while, but suddenly it started failing and I don't understand why!
I have a basic SFC, for example:
<script setup lang = "ts"> const props = withDefaults(defineProps<{ foo : RegExp }>(), { foo: /./ }) </script> <template> <!-- rest of the stuff --> </template>
Build failed with error:
error TS2322: Type 'RegExp' is not assignable to type '(props: Readonly<{ foo?: RegExp | undefined; }>) => RegExp'. Type 'RegExp' provides no match for the signature '(props: Readonly<{ foo?: RegExp | undefined; }>): RegExp'. 14 foo: /./, ~~~ src/App.vue:11:5 11 foo?: RegExp; ~~~ The expected type comes from property 'foo' which is declared here on type 'InferDefaults<Readonly<{ foo?: RegExp | undefined; }>>' Found 1 error in src/App.vue:14
I set up minimal replication in StackBlitz: https://stackblitz.com/edit/vitejs-vite-du7xik?file=src/App.vue
I'm suddenly having some typing related issues with my other work apps, but one at a time. Any guidance would be helpful!
edit:
The problem only occurs when running a production build (because vue-tsc
is called only then). On StackBlitz, this means running turbo build
in the terminal. Beyond that, at least when using IntelliJ, I'm able to see the errors in the IDE.
This error means that
foo
is providing a default value as-is, whereas a factory function is required.should be:
It is an error to specify a prop default value directly because it will be shared between multiple component instances and they may affect each other through it. This applies specifically to regex objects that can be stateful一个>.