错误:找不到模块'eslint-config-flowtype' [英] Error: Cannot find module 'eslint-config-flowtype'

问题描述

我正在尝试完全使用Webpack，ESLint和Flow类型.但是，当我启动webpack-dev-server时，出现以下错误消息.奇怪的是， eslint-config-flowtype 甚至不是NPM中的模块.有人遇到过这个问题吗?预先感谢！

./src/index.jsx中的

  ERROR模块构建失败(来自./node_modules/eslint-loader/index.js):错误:找不到模块'eslint-config-flowtype'引用自:/Users/crs/code/my-project/.eslintrc.json在ModuleResolver.resolve(/Users/crs/code/react-builerplate/node_modules/eslint/lib/util/module-resolver.js:74:19)解析时(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:479:28)加载时(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:551:26)在configExtends.reduceRight(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:425:36)在Array.reduceRight(< anonymous>)在applyExtends(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:403:26)在loadFromDisk(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:523:22)在Object.load(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:559:20)在Config.getLocalConfigHierarchy(/Users/crs/code/react-builerplate/node_modules/eslint/lib/config.js:227:44)在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 

下面是我项目的所有依赖项:

 "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"，酶":"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"，更漂亮":"^ 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"，扩展":[流类型"，插件:流程类型/推荐"，"airbnb"，更漂亮"，漂亮/反应"]，插件":[漂亮"]，"parserOptions":{"ecmaVersion":2016年，"sourceType":模块"，"ecmaFeatures":{"jsx":true}}，"env":{"es6":是的，浏览器":是的，节点":true}，规则":{更漂亮/更漂亮":错误"，流类型/布尔样式":[2，布尔值"]，流类型/定义流类型":1，"flowtype/定界符悬挂":[2，绝不"]，"flowtype/generic-spacing":[2，绝不"]，"flowtype/no-primitive-constructor-types":2"flowtype/no-types-missing-file-annotation":2流类型/无弱类型":2流类型/对象类型分隔符":[2，逗号"]，"flowtype/require-parameter-type":2"flowtype/require-return-type":[2，总是"，{"annotateUndefined":从不"}]，"flowtype/require-valid-file-annotation":2流类型/半":[2，总是"]，"flowtype/空格后的冒号":[2，总是"]，"flowtype/space-before-generic-bracket":[2，绝不"]，流类型/类型前的空格":[2，绝不"]，"flowtype/type-id-match":[2，"^([A-Z] [a-z0-9] +)+ Type $"]，"flowtype/union-intersection-spacing":[2，总是"]，流类型/使用流类型":1流类型/有效语法":1}，设置":{"flowtype":{"onlyFilesWithFlowAnnotation":否}}} 

解决方案

为了使用ESlint配置flowType，您需要像这样配置

 扩展":[插件:流程类型/推荐"，"airbnb"，更漂亮"，漂亮/反应"]，插件":[更漂亮"，流类型"] 

有关更多详细信息，请参见 此文档

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
    }
  }
}

解决方案

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

这篇关于错误:找不到模块'eslint-config-flowtype'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！