Can't use DefineProps with TypeScript

Question

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.

Answer 1

This error means that foo is providing a default value as-is, whereas a factory function is required.

should be:

foo: () => /./,

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.