How to consume third party .flow files?

Question

I'm working on adding flow to a React.js app. I've used flow-typed to add several packages, which seems to be working.

This issue is that I'm using the Material-UI beta. They don't have a repo in flow-typed, but they do provide Component.js.flow files.

However, I'm getting this error:

Error: src/NotFound/NotFound.js:6
  6: import Button from 'material-ui/Button'
                        ^^^^^^^^^^^^^^^^^^^^ material-ui/Button. Required module not found

Error: src/NotFound/NotFound.js:8
  8: import { withStyles } from 'material-ui/styles'
                                ^^^^^^^^^^^^^^^^^^^^ material-ui/styles. Required module not found

My .flowconfig:

[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/build/.*
<PROJECT_ROOT>/scripts/.*
<PROJECT_ROOT>/coverage/.*
<PROJECT_ROOT>/config/.*
.*\.test\.js

[include]

[libs]
<PROJECT_ROOT>/flow-typed/.*

[lints]

[options]
emoji=true

I've tried several solutions in support forums, but I'm still not understanding how to wire this up.

Important package versions:

[email protected]
[email protected]
[email protected]

Answer 1

Flow doesn't think material-ui exists because you're explicitly ignoring all files within node_modules in your .flowconfig. Remove the first line under [ignore] (<PROJECT_ROOT>/node_modules/.*) and you should be good to go.

Note that some other libraries may cause flow issues. You should just ignore those selectively, rather than blanket ignore all 3rd party libs.