Make the generated app work if you flowcheck it

It would be nice if it were possible to add flow to the default project. I tried a minimal flow setup, adding a blank .flowconfig to the root and // @flow to App.css. Four errors:

For the first two I might be configuring things wrong? The second two seem like flow doesn’t know how to handle the non-js imports that webpack is handling for us. I’m not sure what the right way to resolve this.

I was using flow version 0.29.0

[jamiebuilds]

So there are a number of tasks that we have created in order to simplify the setup of Flow in create-react-app.

Right now the .flowconfig that you need to add to get started is a bit difficult. As @gaearon mentioned before it looks like this:

[libs]
./node_modules/fbjs/flow/lib

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

module.name_mapper='^\(.*\)\.css$' -> 'react-scripts/config/flow/css'
module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> 'react-scripts/config/flow/file'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe

There’s a couple things we want to do to get it down to zero config.

• Ignoring node_modules by default, and have a happy path for installing flow-typed definitions. This eliminates the need to have the path in [libs] and the surpress_type’s.
• Having sensible defaults for different file extensions. We can’t support 100% code coverage on something like css-modules but we can support the way all these files are used within create-react-app. This eliminates the module.name_mapper fields.
• Potentially enable >= stage 2 esproposals by default.

We also want to improve the experience of Flow other than the initial setup.

• Integrate with npm start for display type warnings like eslint does right now.
• Hook into npm install for adding flow-typed definitions automagically without pain (or maybe some other solution than npm install, idk yet)

We discussed allowing the repo to have no .flowconfig file, but having this constraint improves the text editor experience so we’re punting on that for now.

As for enabling Flow in create-react-app projects themselves, we would be interested in seeing that happen. As for if it’s enabled on all files by default is up to the community to decide on what they want most. We don’t want to force ourselves on anyone, but adding // @flow on the top of every file is tedious.

If anyone has questions about this let me know, @gabelevi and I will be working through these.

[gaearon]

I added some instructions to the howto guide for now: https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#adding-flow

Longer term, I think we should include Flow by default and Flow should have a way of extending configs like

import 'react-scripts/configs/flow'

for basic settings.