Cannot get object property because property width is missing in undefined

Question

I have this glamor css function, this function when i tried to run flowJS, this function have an error like this, where size? is an object that have padding and width as a string.

Error ------------------------------------------------------------ src/Components/Button/Button.component.style.js:38:17

Cannot get size.width because property width is missing in undefined [1]. [incompatible-use]

 [1] 34|   size?: Option
     35| ): $Shape<CSSStyleDeclaration> =>
     36|   compose(baseStyle, {
     37|     backgroundColor: bgColor,
     38|     width: size.width,
     39|     padding: size.padding,
     40|     color: textColor
     41|   });

My css glamor function :

export const setStyleButton = (
  bgColor?: string,
  textColor?: string,
  size?: Option
): $Shape<CSSStyleDeclaration> =>
  compose(baseStyle, {
    backgroundColor: bgColor,
    width: size.width,
    padding: size.padding,
    color: textColor
  }`);

My Flow Type :

// @flow
export type Option = {|
  padding:string,
  width:string
|}

export type Options = {|
  [key:string] : Option
|}

export type Props = {|
  name: string,
  color?: string,
  textColor?: string,
  size?: Option,
  onPress: () => void,
  disabled: boolean,
|};

can someone help me to fix my problem how to defined object property on flowjs

Answer 1

Since you're passing size optionally (i.e. size?: Option), you need to make sure references to it's properties are null safe.

So

    width: size.width,
    padding: size.padding,

would become

    width: size?.width,
    padding: size?.padding,

If width and padding don't accept optional values, you would need to perform a null check before setting them. Something like:

if (!size?.width) {
  throw new Error('Options.width is required')
}