Unable to install Flow for React in Laravel project - reactjs

Question

I am developing a Laravel application. For the front end, I am using React JS. Now I am trying to integrate Flow into my project. I followed this link https://flow.org/en/docs/install/. But not working.
I run this command in the root folder
npm install --save-dev babel-cli babel-preset-flow
Then created .babelrc file in the project root folder with the following content
{
"presets": ["flow"]
}
Then I run this command
npm install --save-dev flow-bin
This is my package.json
{
"private": true,
"scripts": {
"flow": "flow",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.2.1",
"cross-env": "^5.1",
"flow-bin": "^0.89.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.7.0",
"react-scripts": "^2.1.2",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"#coreui/coreui": "github:coreui/coreui",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "github:coreui/coreui-plugin-chartjs-custom-tooltips",
"#coreui/react": "^2.1.2",
"classnames": "^2.2.6",
"core-js": "^2.6.1",
"enzyme": "^3.8.0",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"node-sass": "^4.11.0",
"prop-types": "^15.6.2",
"react-app-polyfill": "^0.1.3",
"react-loadable": "^5.5.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-config": "^4.4.0-beta.6",
"react-router-dom": "^4.3.1",
"react-test-renderer": "^16.7.0",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"simple-line-icons": "^2.4.1"
}
}
Then I run this
npm run flow init
Then this
npm run flow
I got this error when I run the above command.
> # flow /Users/wai/Desktop/easy-eat
> flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ vendor/symfony/translation/Tests/fixtures/empty.json:1:1
Unexpected end of input
1│
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ vendor/symfony/translation/Tests/fixtures/malformed.json:2:11
Unexpected string
1│ {
2│ "foo" "bar"
3│ }
Found 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # flow: `flow`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # flow script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wai/.npm/_logs/2018-12-28T21_01_36_563Z-debug.log
What is missing and how can I fix it?

Answer 1

I ran into this as well. By default Flow will check all the directories in your project. You can fix this error by creating a .flowconfig file in the root of your project. (Running yarn run flow init will also create this file for you)
Make sure to ignore the vendor folder through this config. My config looks like this:
[ignore]
.*/vendor/.*
[include]
[libs]
[lints]
[options]
[strict]