next.js is really amazing to enable SSR with react. And
flow.js is great way to type check your code in an easy way. But after following the official example to setup the project. I get the
ESLint parsing error when it encounters the flow
type definition. Let’s see how to solve it.
1. Install flow
npm i -D babel-plugin-transform-flow-strip-types flow-bin
First, we install
flow and a babel plugin to strip its type definition from the final code.
Then we create a
.babelrc in the root folder:
.flowconfig in the root folder:
3. Create flow type definition for your next.js
next.js.flow in the
/* @flow */
You are pretty much done after this. You can start using
flow. And this is exactly how the official example teach to do and it works. But, ESLint doesn’t like it.
4. Install ESLint support
I assume you already have
ESLint installed and setup.
npm i -D babel-eslint eslint-plugin-flowtype
The trick is don’t try to add any babel settings here in .babelrc because next.js settings handles that for you. So, ignore the babel related settings in eslint-plugin-flowtype. But you can still apply its flow rule settings.
5. Open your .eslintrc file
Merge the following lines into your existing settings:
Congratulations! All is well. :) Hope it helps.
Thanks for reading!
Follow me (albertgao) on twitter, if you want to hear more about my interesting ideas.