Why does ESLint throw error while using flow? - react-native

Question

I've initialized a new react-native project with RN Version 0.59.
I've setup eslint (with airbnb-ruleset), babel and flow:
package.json:
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.96.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "^16.8.5"
},
babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset", "flow"]
};
eslintrc.json
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}
Issue:
If I run eslint, I got the following errors:
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default-member
How can I configure eslint in right way to recognize that this is a flow-type declaration?

Answer 1

I've figured it out.
First I've installed eslint-plugin-flowtype
After that, I've edited .eslintrc.json like this:
add parser: "babel-eslint",
add to extends"plugin:flowtype/recommended"`
add to plugins : "flowtype"
After that, it works.
File looks like this now:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "plugin:flowtype/recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"flowtype"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}