Comments (45)
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 thesurpress_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 thannpm 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.
from create-react-app.
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.
from create-react-app.
I’d like something like npm run add flow
, npm run add relay
, etc, for the future.
For now I’ll document this workaround in How To.
from create-react-app.
It would be nice if the type checking was weak by default, but you could add // @flow
to make the file strongly typed. We use flow throughout our apps and like to trickle // @flow weak
on files as we're trying to clean them up and only ever use // @flow
when the code is mission critical.
from create-react-app.
--all
isn't available on all the commands. Like flow status --all
doesn't exist, since it's not clear what it should do if there's already a flow server running without the --all
command. But flow server --all
, flow check --all
, and flow start --all
should all exist.
And yeah, it will check everything, including node_modules :)
from create-react-app.
@jameskyle the ignoring of node_modules by default can be problematic. Usually, we want flow to ignore the errors but still read the type information. I tend to publish my NPM modules with their flow types. This way you don't need to get the flow-typed module separately (see react-time ago)
I hope that use-case doesn't break.
from create-react-app.
@gaearon Starting to see a bit more precisely what is going on here. I'll try something using flow-bin
and a plugin that I'll place in react-dev-utils
. From there, I think I'll be able to get you a POC and probably something publishable soon after. If the plugin approach doesn't work, i think that creating a loader from my plugin attempt will not be hard.
from create-react-app.
We don't want to force ourselves on anyone, but adding // @flow on the top of every file is tedious.
This is actually what I do in all my flow projects, is there another way?
Yes, you can add --all
to the cli command or all=true
to your .flowconfig
under [options]
from create-react-app.
@jayphelps No, this is not included. There is a proof of concept in #350 and @gabelevi expressed interest in having an official Flow loader for webpack but so far I haven't seen any progress on this.
from create-react-app.
OBSOLETE You don't need any stub now!
Note: with the latest react-scripts there is no flow stubs for css and files. Now you will need to redirect to the stubs made for jest:
module.name_mapper='^\(.*\)\.css$' -> 'react-scripts/config/jest/CSSStub'
module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> 'react-scripts/config/jest/FileStub'
Here is my currently working, out of the box, .flowconfig
:
[ignore]
<PROJECT_ROOT>/node_modules/fbjs/.*
[libs]
./node_modules/fbjs/flow/lib
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
module.name_mapper='^\(.*\)\.css$' -> 'react-scripts/config/jest/CSSStub'
module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> 'react-scripts/config/jest/FileStub'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
from create-react-app.
@gaearon @thejameskyle I'm working on a short-term solution PR for that in flow-typed
from create-react-app.
I think the first two are fine if we setup .*/node_modules/.*
as an ignored path in .flowconfig
. The second two require a name mapper: https://flowtype.org/docs/modules.html#css-modules-with-webpack
from create-react-app.
Indeed our case we’d need to map .css
to modules that don’t export anything, and all other files (e.g. images) to modules that export strings. This is similar to what React Native does.
I am, however, not very happy with creating configs on user’s behalf right in their directory even if they don’t use Flow. The point of this project is that there is no user configuration, at least for as long as you can avoid it.
What if flow init
could somehow “autodiscover” our initial config, and use it instead of the default one? This way we wouldn’t create any files by default, but when the user runs Flow for the first time, they get it correctly preconfigured. Since this is done on demand, we have a chance to keep improving the initial config, and even people who created apps a long time ago would get an up-to-date initial config when they start using Flow.
from create-react-app.
As a temporary workaround, I added these stubs: 6885094.
Now I see no errors with a config 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
And I wish this config was inside react-scripts
somehow, at least until flow init
.
from create-react-app.
What about having a command like npm run flow
which adds that config and does flow init
? Maybe too much?
from create-react-app.
I would love flow being included by default 👍. Does that mean that we would also get flow errors in the chrome console and terminal? Flow helps me a lot with fixing bugs in javascript.
People that don't like flow (for some reason) probably wouldn't even notice it, as they don't include the /* @flow */ comment on top of their file.
from create-react-app.
Integrate with npm start for display type warnings like eslint does right now.
😍😍😍 There is someone already investigating this I believe:
#324
Hook into npm install for adding flow-typed definitions automagically without pain (or maybe some other solution than npm install, idk yet)
😍😍😍
We don't want to force ourselves on anyone, but adding // @flow on the top of every file is tedious.
This is actually what I do in all my flow projects, is there another way?
from create-react-app.
I find it tedious to put // @flow
at the top of files, but I also find it tedious when I run Flow with --all
and it complains about things that aren't really problems. It's especially bothersome if that's someone's first experience with Flow.
What we ended up doing with eslint in create-react-app
is configuring things in a very conservative mode, only reporting problems in cases where we can be highly confident it's a real problem. Would something like that be possible with Flow?
Also I would like to volunteer to help out testing any development build with a "flow defaults to on" experience!
from create-react-app.
@thejameskyle I could not get the --all
options to work. It also doesn't seem to be listed here:
https://flowtype.org/docs/cli.html
The all=true option seem to do something. In the sense that it taking my mac already 4 min to complete hehe, and still not completed, and making all kind of noises that I have never heard lol :P Is it analyzing now my node_modules
as well?
from create-react-app.
+1 to include flow by default
from create-react-app.
This is mostly fixed now. I updated instructions in #567.
fbjs
is the only remaining issue there and it isn’t strictly related to CRA setup so closing.
from create-react-app.
I just started a new project with create-react app, and for flow to work I had to include the bit in the documentation,
[ignore]
<PROJECT_ROOT>/node_modules/fbjs/.*
As well as
[options]
suppress_type=$FlowIssue
from create-react-app.
Integrate with npm start for display type warnings like eslint does right now.
@thejameskyle did you end up not being able to do this? Doesn't appear to happen--I need to run flow
manually--I may have missed some sort of configuration though.
from create-react-app.
Note: with the latest react-scripts there is no flow stubs for css and files. Now you will need to redirect to the stubs made for jest:
This sounds wrong. You shouldn't need to redirect any stubs, it should "just work".
Have you tried removing module name mappers completely?
Reopening because I'm confused and need a confirmation that it works without any mappers in the most recent Flow version.
from create-react-app.
@gaearon Didn't tried without the mappers actually. I just followed the README generated by create-react-app a while ago. This seems fixed now though (the template doesn't ask you to map anymore). I think you can close this safely and dismiss my last comment!
from create-react-app.
I'll still try with the latest flow version.
from create-react-app.
Ok, nice, it works with this minimal .flowconfig
:
[ignore]
<PROJECT_ROOT>/node_modules/fbjs/.*
[libs]
./flow-typed
I also ran this to get type annotations for jest (explaining the [libs]
section):
npm i -g flow-typed
flow-typed install [email protected] --flowVersion 0.35
from create-react-app.
@rricard Could you update our Flow instructions to match your experience (e.g. Jest thing).
from create-react-app.
That bring me to an another point: maybe we should do a flow-typed annotation for react-scripts
that aliases to jest. Because, since jest is not explicitly depended on in the package.json
, you will not be able to just flow-typed install
and get the annotations just like this
from create-react-app.
So, I think documenting the flow-typed procedure could be a good thing, but first we have to figure out the react-scripts
flow-typed annotation... Going to do this just now!
from create-react-app.
Because, since jest is not explicitly depended on in the package.json, you will not be able to just flow-typed install and get the annotations just like this
It would be nice if flow-typed
knew about react-scripts
and looked one package deeper.
cc @thejameskyle
from create-react-app.
Here: flow-typed/flow-typed#467
from create-react-app.
@gaearon Otherwise, I was wondering if you would be interested in adding flow out of the box to create-react-app
? That would mean having flow type errors showing in the start
/compile
output like eslint does. This would be completely optional since you would need to add /* @flow */
to the file to see it typechecked. This also means we would provide a default .flowconfig
in the template and add a script triggered at postinstall
to download flow-typed
annotations after adding some packages.
from create-react-app.
I'd definitely be interested. There is a PR with a proof of concept in #350. I reached out to the Flow team several times asking for their feedback on the Webpack loader that this PR used but unfortunately they never got back to me.
If you're interested in taking this proof of concept and making it production-ready (maybe looking at other official Flow integrations and taking lessons from them) this is a good contribution opportunity.
from create-react-app.
This also means we would provide a default .flowconfig
Nah. We'd create it from the loader the first time it sees a flow annotation.
from create-react-app.
@gaearon Well, I'll take a look at all of this... One last question, so if you don't want the .flowconfig right away, I imagine, we'll only download them from the loader if we see a flow annotation as well, right?
from create-react-app.
@gaearon I don't know either how the flow team would approach this problem, but I would work around flow-bin
and not use a loader. Flow works project-wide and, to me, it doesn't make much sense as a loader. Maybe a webpack plugin would work, but I want to see first where I can go without it...
from create-react-app.
That way we only depend on flow-bin
, a facebook-supported dependency with custom code wrapping its execution in an another facebook-supported project. So you don't end up depending on my weird custom package or whatever...
from create-react-app.
@rricard It being a loader would help integrating into npm start
IMO. I don't advocate it actually behaving like a loader, but rather using that as an opportunity to know when to trigger re-checks. You'd still debounce its calls and wouldn't really use the sources.
from create-react-app.
But yea, WP plugin could work too. As long as you have a way to know when to trigger re-checks (or does Flow do this automatically anyway? I have no idea.)
from create-react-app.
@gaearon I absolutely see why a loader has its advantages. Plugins in my opinion would work too.
from create-react-app.
I don't know when flow updates exactly but once it's started, you just ask for the typechecking results and it's right there with no delay. So the question is when to add the flow errors to the output.
from create-react-app.
@rricard And when to "re-trigger" the output due to Flow even if webpack didn't re-trigger it by itself.
from create-react-app.
Cool, thanks for looking at it!
from create-react-app.
Going to close as it should be fine now.
from create-react-app.
Related Issues (20)
- [https://newsroom.spotify.com/news/](https://deezer.page.link/fCBsxrTRUZvKbLkA8) HOT 3
- react-scripts/v/5.1.0-next.14 contains multiple security vulnerabilities for inner modules
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 5
- React JS HOT 4
- @babel/plugin-proposal-private-property-in-object missing from babel-preset-react-app dependencies HOT 1
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) in new react app HOT 3
- 不动 啊 HOT 1
- React Application Embedded Script HOT 1
- Allow user to config publicPath of webpack and set its default value to auto
- Cannot find module 'ajv/dist/compile/codegen' HOT 2
- I am so angry i just cant take it HOT 2
- An Error HOT 1
- Bad Resource link in https://create-react-app.dev/ HOT 2
- About deprecated packages HOT 1
- Is there a good fork of CRA? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.