Why does Flow report my React component as being `incompatible with string`?

user_261122 0
Viewed 2441

I have an input component that I am including in larger form component and Flow is throwing the following error.

Cannot instantiate React.Element because class UploaderInput [1] is incompatible with string [2] in type argument
ElementType.

     src/components/provider/signout/SignoutNoteForm.jsx
     108│               />
     109│             </div>
     110│             <div>
     111│               <UploaderInput
     112│                 dropInstructions="Drop files to attach to this signout or click to browse"
     113│                 error={errors}
     114│                 files={values.files}
     115│                 name="files"
     116│                 onChange={value => setFieldValue(`files`, value)}
     117│                 onUploadingStart={startUploading}
     118│                 onUploadingComplete={stopUploading}
     119│                 s3Url={s3Url}
     120│                 title="Upload Files"
     121│                 touched={touched}
     122│                 uploadOptions={uploadOptions}
     123│               />
     124│               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125│             </div>
     126│             <div>

     /private/tmp/flow/flowlib_1e7d8b2/react.js
 [2] 170│   | string

     src/components/form/UploaderInput.jsx
 [1]  98│ export default class UploaderInput extends Component<Props, State> {

This is not my only input component and I'm having no issues with any of the others. What does this rather opaque message mean and what are some approaches to addressing it?

flowtype reactjs
1 Answers

Turns out, it was a mismatch between my Props and my defaultProps in the UploaderInput type.

This command:

flow check --show-all-branches

made it much clearer and is a good tip for future debugging.

Cannot instantiate React.Element because in type argument ElementType:
 • Either class UploaderInput [1] is incompatible with string [2].
 • Or null [3] is incompatible with string [4].

     components/provider/signout/SignoutNoteForm.jsx
     108│               />
     109│             </div>
     110│             <div>
     111│               <UploaderInput
     112│                 dropInstructions="Drop files to attach to this signout or click to browse"
     113│                 error={errors}
     114│                 files={values.files}
     115│                 name="files"
     116│                 onChange={value => setFieldValue(`files`, value)}
     117│                 onUploadingStart={startUploading}
     118│                 onUploadingComplete={stopUploading}
     119│                 s3Url={s3Url}
     120│                 title="Upload Files"
     121│                 touched={touched}
     122│                 uploadOptions={uploadOptions}
     123│               />
     124│               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125│             </div>
     126│             <div>

     /private/tmp/flow/flowlib_2ba42473/react.js
 [2] 170│   | string

     components/form/UploaderInput.jsx
 [4]  81│   title: string,
        :
 [1]  98│ export default class UploaderInput extends Component<Props, State> {
        :
 [3] 107│     title: null,
user_2611220
Related