Flow+Styled Components+VS Code+Windows
Flow and Styled Components were recently recommend to me as things that I need to be using right now in the React world. But unfortunately it wasnât a case of a simple npm install and I had quite a bit of trouble getting Styled Components (1.4.5) and Flow (0.45.0) working on Windows with Visual Studio Code.
Step/Problem/Fix 1
I installed the flow-typed package but I still got the following errors:
node_modules/styled-components/dangerfile.js
import { danger, warn, fail, message } from 'danger'
^^^^^^^^ danger. Required module not foundnode_modules/styled-components/lib/models/InlineStyle.js.flow
import { StyleSheet } from 'react-native'
^^^^^^^^^^^^^^ react-native. Required module not foundnode_modules/styled-components/lib/models/StyleSheet.js.flow
get injected(): boolean {
^ Potentially unsafe get/set usage. Getters and setters with side effects are potentially unsafe and disabled by default. You may opt-in to using them anyway by putting `unsafe.enable_getters_and_setters=true` into the [options] section of your .flowconfig.node_modules/styled-components/lib/native/index.js.flow
import reactNative from 'react-native'
^^^^^^^^^^^^^^ react-native. Required module not foundnode_modules/styled-components/src/models/InlineStyle.js:3
import { StyleSheet } from 'react-native'
^^^^^^^^^^^^^^ react-native. Required module not foundnode_modules/styled-components/src/test/utils.js
import expect from 'expect'
^^^^^^^^ expect. Required module not found
One solution is just to ignore everything from Styled Components:
[ignore]
.*/node_modules/styled-components/.*But that feels like it defeats the point of using Flow in the first place. The below .flowconfig appears to work fine:
[ignore]
#no point including this as the lib folder is our main one
.*/node_modules/styled-components/src/.*
[include]
[libs]
node_modules/styled-components/flow-typed/danger_v0.x.x.js
node_modules/styled-components/flow-typed/react-native.js
[options]
unsafe.enable_getters_and_setters=trueStep/Problem/Fix 2
Flow reports âNo errors!â but you know that there are definitely errors.
//FILE: app.js
// @flow
import React from 'react';
import { Button, Card } from '../components';const b = <Button/>;//FILE: components/index.js
//Note that this doesn't have a flow declaration!
import Button from './button';
import Card from './card';export { Button, Card };//FILE: components/button/index.js
// @flow
import React from 'react';
const Button = (props: { foo: string }) => {
return <div>{props.foo}</div>
};export default Button;
In the above scenario I have 3 files:
app.jsthe main application which uses the<Button/>component and should have an error about thefooprop not being providedcomponents/index.jsan individual âhelperâ module so that all components can be imported in one line as named importscomponents/button/index.jsthe button component
This is probably a rookie mistake. Since components/index.js didnât have // @flow at the start of the file, this seems to mean that Flow will not end up propagating the declarations from the button up into the main app. It is possibly a case of âleaking anyâ that the documentation warns about.
So the fix is to ensure that every file in your project starts with // @flow, or alternatively use the âallâ configuration option.
Step/Problem/Fix 3
Getting Flow to work in Visual Studio Code wasnât a case of simply installing the extension.
The recommend VS Code plugin Flow Language Support (0.6.0) doesnât seem to support stateless functional components. The alternative vscode-flow-ide seems to fare a lot better, but still requires some configuration.
It is meant to work with Flow installed globally or locally, but in both cases I still got an error about it being unable to find Flow:
[Flow] Cannot find flow in PATH. Try to install it by npm install flow-bin -g
You may also get the below error on your Flow annotated types:
[js] âtypesâ can only be used in a .ts file.
The fix is to add the bellow to your VS Code settings.json file:
"flowide.pathToFlow": "flow",
"javascript.validate.enable": falseItâs a bit weird that pathToFlow is not actually a path, but it works. Turning off JavaScript validation also seems a bit odd, but it doesnât seem to make a difference since I am using ESLint which still highlights the syntax errors in VS Code.
Step/Problem/Fix 4
When running from the command prompt I quite often get the following result:
[0KNo errors!erver is not responding (3 retries remaining): [processing] |] \
It says that there are no errors, but it is obviously failing because it cannot contact the server for some reason. Really it should be failing with a non âOKNo errors!â message, also note that the text is messed up and overwriting itself.
The fix seems to be to run the command againâŚ
Conclusion
My Flow experience on Windows with my tools of choice hasnât been a particularly pleasant one. Some of the problems were at this side of the keyboard and some will be resolved once it (and its tools) mature. Flow is obviously a popular and powerful tool, but right now my initial reaction is that I didnât have this many problems using TypeScript 3 years ago, so if I really wanted to use âJavaScript with static typesâ right now, then I would probably just use TypeScript⌠but that attitude might quickly change now that I am now up and running!
