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.
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:
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.
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.
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.