Using Styled Components and Flow with Create React App

Let’s get them to play nice

What we want to do

We love Styled Components, we love Flow, and we love Create React App. How do we get all of these to play nice with each other? (If you are reading this, you probably realize it wasn’t as intuitive as you thought)

Prerequisites

• Create React App is installed and a project is setup
• A little bit of patience

You can read the concise steps at the end of the article. I recommend sticking around for the longer version below!

Installing Flow

This part should be fairly simple. Facebook has the steps laid out here, but I’ll summarize it in the article:

• Run npm install flow-bin
• Add “flow: flow” to scripts in package.json
• run npm run flow init to generate a .flowconfig

One more thing you may have to do if you’re using VSCode is to install vscode-flow-ide extension (or equivalent), and possibly set javascript.validate.enable = false to prevent the editor from mistaking your code for improper typescript code.

Honestly the biggest pain here is fighting with whatever IDE you are using. You will probably have to do some other finagling if you’re using something other than VSCode.

Installing Styled Components (properly)

Here is where things get a little more tricky. The first step is easy, just install styled components:

npm install styled-components

If you try importing styled-components, you will notice that flow complains that it cannot find the module. This is because styled components doesn’t come with flow types.

Adding Flow Typed

Flow-typed will fix this by providing accurate stubs to styled components library (and many others as well). Here are the steps:

• Run npm install flow-typed
• add ‘flow-typed: flow-typed’ to your scripts
• install flow-types for styled components with npm run flow-typed install styled-components@x.x.x. Replace the version of styled components with whatever version you are using
• Boom! Errors should be gone

Now, we could potentially stop here, but there are some other things that will help us work with styled components. For example, class names are hashed by default, making it super hard to identify our components in the DOM.

Adding babel-plugin-styled-components

We can get our human readable component names to show in the DOM by installing a babel plugin called babel-plugin-styled-components. According to the docs we get these features:

• consistent hash name for classes on both server and client (important for server side rendering)
• appends your human readable class name to the full class name for easy debugging
• minifies your CSS and transpiles your tagged template literals in a more compact way than babel does itself

The only problem is that we are using Create React App, and we probably don’t want to eject. No problem! Luckily there is something called macros (basically packages that allow us to extend babel without ejecting CRA).

• npm install --save-dev babel-plugin-macros
• Instead of importing styled-components in your code, import styled-components/macro

Flow error importing styled-components/macro

That should be it! Although in some cases you may get a flow error saying flow can’t find the module now that you added /macro.

This tends to happen when your .flowconfig is set to ignore node_modules. Remove the line under [ignore] that says .*/node_modules/.*. Fair warning, this fixed the error for me, but it may not work for you if you really need to ignore node_modules. In this case, ignore everything except the macro folder.

The Short Version

Install Flow

• Run npm install flow-bin
• Add “flow: flow” to scripts in package.json
• run npm run flow init to generate a .flowconfig

Install Styled Components

• npm install styled-components

Install flow-typed

• Run npm install flow-typed
• add flow-typed: flow-typed to your scripts
• install flow-types for styled components with npm run flow-typed install styled-components@x.x.x. Replace the version of styled components with whatever version you are using.

Install babel-plugin-styled-components

• npm install --save-dev babel-plugin-macros
• Instead of importing styled-components in your code, import styled-components/macro

flow error importing styled-components/macro?

• Remove .*/node_modules/.* from [ignore] section of .flowconfig
• If you need to ignore node_modules, ignore everything except the macro folder.

Disclaimer

There will probably be some caveats encountered in your individual situation, but hopefully this guide got you 99% of the way there. Feel free to drop a comment with questions, concerns, or suggestions!