function that takes argument with multiple possible types throws error

[FezVrasta]

/* @flow */

type Props = {
  width: string | number,
};

function fun({
  width = '30em',
}: Props) {
  return width;
}

It complains with:

8:   width = '30em',
     ^ number. This type is incompatible with
8:   width = '30em',
     ^ string
8:   width = '30em',
     ^ string. This type is incompatible with
8:   width = '30em',
     ^ number
8:   width = '30em',
             ^ string. This type is incompatible with
8:   width = '30em',
     ^ number

repro

post updated

[steelbrain]

It's actually correctly saying that, the repro fails on even babel parsing. link

What you want to do is

/* @flow */

type Props = {
  width: string | number,
};

function MyComponent({
  width = '30rem',
}: Props) {
  return <div style={{ width }} />
}

[FezVrasta]

Sorry it was a typo... On my project it failing the code you provided.
I'm going to try to reproduce it

[FezVrasta]

I updated the repro fixing the typo, the correct error is shown now.

I also simplified the example to remove React from the equation.

If it helps, the function works properly without any type error if I use it without any default value set:
https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVAXAngBwKZgAKATnDgM5gC8YA3qmGAgJYAmGAFgFxgB2ArgFsARnmJgAPmHIZizXgHMANKgC+AbnRR+vAMYZmcXmG28AFPUYt2HNTxJlyASjoMwxPBn7Fj1zptV0VFMLJjZOHgBGAAYwVSdgnVC-bjAAcgAmaLxBNLinIA

It also works if I move the props object destructuring inside the function:
https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVAXAngBwKZgAKATnDgM5gC8YA3qmGAgJYAmGAFgFxgB2ArgFsARnmJgAPmHIZizXgHMANKgC+AbnRR+vAMYZmcXmG28AFDlIUeJMuQCUdBmF1GZTxoxbsO1MAHIAZgAGPEF-FUZVP0s7TWdiPAx+YmNvTk1VIA