错误：找不到模块“eslint-config-flowtype”

Question

I'm trying to use Webpack, ESLint and Flow type altogether. But, when I start webpack-dev-server I get the error message below. The weird thing is that eslint-config-flowtype is not even a module in NPM. Has someone encountered this issue before? Thanks in advance!

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint-config-flowtype'
Referenced from: /Users/crs/code/my-project/.eslintrc.json
    at ModuleResolver.resolve (/Users/crs/code/react-builerplate/node_modules/eslint/lib/util/module-resolver.js:74:19)
    at resolve (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:479:28)
    at load (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:551:26)
    at configExtends.reduceRight (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:425:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:403:26)
    at loadFromDisk (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:523:22)
    at Object.load (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:559:20)
    at Config.getLocalConfigHierarchy (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config.js:227:44)
    at Config.getConfigHierarchy (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config.js:179:43)
 @ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.jsx

Below are all my project's dependencies:

  "dependencies": {
    "axios": "0.16.1",
    "babel-plugin-dynamic-import-webpack": "1.0.1",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-register": "6.24.1",
    "compression": "1.6.2",
    "cors": "2.8.3",
    "express": "4.15.3",
    "lodash": "4.17.4",
    "preact": "8.1.0",
    "preact-compat": "3.16.0",
    "prop-types": "^15.6.1",
    "prop-types-extra": "^1.1.0",
    "react": "^16.4.0",
    "react-addons-perf": "^15.4.2",
    "react-dom": "^16.4.0",
    "react-hot-loader": "3.0.0-beta.6",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^3.3.2",
    "webpack": "^4.11.1",
    "webpack-dev-middleware": "1.10.2",
    "webpack-hot-middleware": "2.18.0"
  },
  "devDependencies": {
    "babel-core": "6.24.1",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-dynamic-import-node": "1.0.2",
    "babel-plugin-react-flow-props-to-prop-types": "^0.15.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "6.24.1",
    "babel-preset-env": "1.5.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "6.24.1",
    "enzyme": "2.8.2",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-react": "1.1.7",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-flow": "2.29.1",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.1.0",
    "flow-bin": "^0.74.0",
    "husky": "^0.14.3",
    "jest": "20.0.4",
    "jest-serializer-enzyme": "1.0.0",
    "lint-staged": "^7.1.3",
    "moxios": "0.4.0",
    "nodemon": "1.11.0",
    "prettier": "^1.13.5",
    "prettier-eslint": "^8.8.1",
    "react-test-renderer": "15.5.4",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-serve": "^1.0.3"
  }

.eslintrc.json

{
  "parser": "babel-eslint",
  "extends": [
    "flowtype",
    "plugin:flowtype/recommended",
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error",
    "flowtype/boolean-style": [
      2,
      "boolean"
    ],
    "flowtype/define-flow-type": 1,
    "flowtype/delimiter-dangle": [
      2,
      "never"
    ],
    "flowtype/generic-spacing": [
      2,
      "never"
    ],
    "flowtype/no-primitive-constructor-types": 2,
    "flowtype/no-types-missing-file-annotation": 2,
    "flowtype/no-weak-types": 2,
    "flowtype/object-type-delimiter": [
      2,
      "comma"
    ],
    "flowtype/require-parameter-type": 2,
    "flowtype/require-return-type": [
      2,
      "always",
      {
        "annotateUndefined": "never"
      }
    ],
    "flowtype/require-valid-file-annotation": 2,
    "flowtype/semi": [
      2,
      "always"
    ],
    "flowtype/space-after-type-colon": [
      2,
      "always"
    ],
    "flowtype/space-before-generic-bracket": [
      2,
      "never"
    ],
    "flowtype/space-before-type-colon": [
      2,
      "never"
    ],
    "flowtype/type-id-match": [
      2,
      "^([A-Z][a-z0-9]+)+Type$"
    ],
    "flowtype/union-intersection-spacing": [
      2,
      "always"
    ],
    "flowtype/use-flow-type": 1,
    "flowtype/valid-syntax": 1
  },
  "settings": {
    "flowtype": {
      "onlyFilesWithFlowAnnotation": false
    }
  }
}

Answer 1

In order to configure flowType with your ESlint, you need to configure it like

 "extends": [
    "plugin:flowtype/recommended",
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier",
    "flowtype"
  ]

For more details check this documentation

Answer 2

Got a similar error in Visual Studio using Create React App but it was:

(ESLint) Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint-plugin-flowtype

Solved by installing it as a global package: npm i -g eslint-plugin-flowtype

More info here:

https://github.com/facebook/create-react-app/issues/274

https://github.com/eslint/eslint/issues/3458